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

Question

我有一个<Select>组件来自react-select将几个选项呈现到下拉列表中，这些选项是从 api 调用中获取、映射并显示名称的。当我从下拉列表中选择一个选项时，所选名称不会出现在框中。看来我的handleChange方法未触发，这是我更新架构名称值的位置:

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

这不会更新选择某些内容后在下拉列表中看到的值。

我不确定我是否将正确的内容传递给 value组件本身内的 prop

   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。