React - handleChange 方法未触发导致所选选项名称未更新

Question

我有一个来自 react-select 的 <Select> 组件将几个选项呈现给下拉列表，这些选项是从 api 调用中获取的，映射过来，并显示名称。当我 select 从下拉列表中选择一个选项时， selected 名称不会出现在框中。似乎我的 handleChange 方法没有触发，这是我更新架构名称值的地方：

  handleChange = value => {
    // this is going to call setFieldValue and manually update values.dataSchemas
    this.props.onChange("schemas", value);

这不会更新 selected 后下拉列表中显示的值。

我不确定我是否将正确的东西传递给组件本身内部的 value 道具

   class MySelect extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          schemas: [],
          fields: [],
          selectorField: ""
        };

        this.handleChange = this.handleChange.bind(this);
      }

      componentDidMount() {
        axios.get("/dataschemas").then(response => {
          this.setState({
            schemas: response.data.data
          });
          console.log(this.state.schemas);
        });
      }

      handleChange = value => {
        // this is going to call setFieldValue and manually update values.dataSchemas
        this.props.onChange("schemas", value);
        const schema = this.state.schemas.find(
          schema => schema.name === value.target.value
        );
        if (schema) {
          axios.get("/dataschemas/2147483602").then(response => {
            this.setState({
              fields: response.data.fields
            });
            console.log(this.state.fields);
          });
        }
      };

      updateSelectorField = e => {
        this.setState({ selectorField: e.target.value });
      };

      handleBlur = () => {
        // this is going to call setFieldTouched and manually update touched.dataSchemas
        this.props.onBlur("schemas", true);
      };

      render() {
        return (
          <div style={{ margin: "1rem 0" }}>
            <label htmlFor="color">
              DataSchemas -- triggers the handle change api call - (select 1){" "}
            </label>
            <Select
              id="color"
              options={this.state.schemas}
              isMulti={false}
              value={this.state.schemas.find(
                ({ name }) => name === this.state.name
              )}
              getOptionLabel={({ name }) => name}
              onChange={this.handleChange}
              onBlur={this.handleBlur}
            />
            {!!this.props.error && this.props.touched && (
              <div style={{ color: "red", marginTop: ".5rem" }}>
                {this.props.error}
              </div>
            )}
          </div>
        );
      }
    }

我已链接 an example 显示此问题。

Answer 1

在您的 handleChange 函数中，您正试图访问 value.target.value。如果你在函数的顶部 console.log(value) ，你会得到：

{
    id: "2147483603"
    selfUri: "/dataschemas/2147483603"
    name: "Book Data"
}

这是调用 handChange 时使用的值。使用 value.name 而不是 value.target.value.

React - handleChange 方法未触发导致所选选项名称未更新

React - handleChange method not firing causing selected option name not to update

javascript

reactjs

react-select