Javascript React-handleChange方法未激发，导致所选选项名称不更新

我有一个组件，从呈现一对选项到下拉列表，这些选项从api调用中获取，映射到，并显示名称。当我从下拉列表中选择一个选项时，所选名称不会显示在框中。我的handleChange方法似乎没有启动，这就是我更新架构名称值的地方：

  handleChange = value => {
    // this is going to call setFieldValue and manually update values.dataSchemas
    this.props.onChange("schemas", 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>
        );
      }
    }

我已链接显示此问题。

在handleChange函数中，您试图访问value.target.value。如果在函数顶部添加console.logvalue，您将获得：

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

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