Breaking News: Grepper is joining You.com. Read the official announcement!

how we can set react select required

Cautious Caiman answered on January 6, 2022 Popularity 9/10 Helpfulness 2/10

answer how we can set react select required

how we can set react select required

Comment

import React from "react";
import { Form, Select, Button } from "antd";
import "./styles.css";
import "antd/dist/antd.css";
const { Option } = Select;

const AppWithForm = props => {
  const { getFieldDecorator } = props.form;

  const handleSubmit = () => {
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      } else console.log("form is NOT valid");
    });
  };

  const onChange = value => {
    console.log(`selected ${value}`);
  };

  return (
    <div className="App">
      <Form layout="inline">
        <Form.Item>
          {getFieldDecorator("dropdown", {
            rules: [{ required: true, message: "Please select a person!" }]
          })(
            <Select
              showSearch={false}
              style={{ width: 200 }}
              placeholder="Select a person"
              optionFilterProp="children"
              onChange={onChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSubmit}>
            Save
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

const App = Form.create({})(AppWithForm);

export default App;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-select required set

Link to this answer
Share Copy Link

Contributed on Jan 06 2022

Cautious Caiman

0 Answers Avg Quality 2/10

how we can set react select required

Contents

More Related Answers

how we can set react select required

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.