reactjs - 需要 react 选择下拉列表

Question

我是新来的 react 。

我正在尝试使用下面的库来使用下拉列表。

当我添加 'required' 属性时，它不会使用表单标签验证它。

https://www.npmjs.com/package/react-select

import React from 'react';
import Select from 'react-select';

const options = [{
        value: 'chocolate',
        label: 'Chocolate'
    },
    {
        value: 'strawberry',
        label: 'Strawberry'
    },
    {
        value: 'vanilla',
        label: 'Vanilla'
    },
];

class App extends React.Component {
    state = {
        selectedOption: null,
    };
    handleChange = selectedOption => {
        this.setState({
            selectedOption
        });
        console.log(`Option selected:`, selectedOption);
    };
    render() {
        const {
            selectedOption
        } = this.state;

        return ( <
            Select value = {
                selectedOption
            }
            onChange = {
                this.handleChange
            }
            options = {
                options
            }
            //required
            />
        );
    }
}

当我从控制台查看它时，它显示输入标签被一堆 div 包裹。有没有办法从组件访问输入？或者是否有我可以访问输入标签以直接添加所需的 javascript 代码？

Answer 1

我做了一个使用 Ant-Design 表单的小例子，在代码和框上检查

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;

您应该使用 ant-design Form HOC 包装您的组件，它将许多功能作为 Prop 传递给您的组件，因此您可以使用“getFieldDecorator”、“validateFields”来处理您的表单
https://codesandbox.io/s/trusting-microservice-11418