требуется выбрать выпадающий список - PullRequest
Новая
       5

требуется выбрать выпадающий список

0 голосов
/ 16 февраля 2020

Я новичок, чтобы реагировать.

Я пытаюсь использовать библиотеку ниже, чтобы использовать раскрывающийся список.

Когда я добавил атрибут '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, к которому я могу получить доступ к тегу ввода для непосредственного добавления необходимого?

enter image description here

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Вы должны использовать библиотеку форм, такую ​​как Formik, и использовать Yup для проверки формы. Yup имеет мощные методы проверки и полностью поддерживается Formik. Вы также можете написать свою собственную схему проверки.

0 голосов
/ 17 февраля 2020

Я сделал крошечный пример использования формы Ant-Design, отметив, что на codeandbox 

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 HO C, это передать множество функций как реквизиты для вашего компонента, и вы можете обрабатывать свою форму с ними, такими как 'getFieldDecorator', 'validateFields'

https://codesandbox.io/s/trusting-microservice-11418

...