反应选择组件值未更新。

Question

只是想知道我在这里做错了什么。当我从列表中选择一个值时，组件输入字段不会被该值填充。

class Search extends Component {
constructor(props) {
    super(props);
    this.state = {
        name: 'order_select_field',
        placeholder: "Make a selection",
    }
}

componentWillMount () {
    fetch('http://apirequest.com')
        .then( function(response) {
            return response.json();
        })
        .then(function(json) {
            this.setState({options: json});
        }.bind(this))
    }

handleChange(event) {
    this.setState({ })
}

render() {
    return (
        <div>
            <Select
                name={this.state.name}
                options={this.state.options}
                placeholder={this.state.placeholder}
            />
        </div>
    )
}

}

Answer 1

您的主要问题是您的handleChange方法未设置值

handleChange = (event) => {
  this.setState({
    ...this.state,
    value: event.target.value
  })
}

对于普通<select>组件，onChange事件在处将具有DOMElement引用event.target，并且react提供value了DOM元素上的属性，您可以使用它来更新状态。您是第三方<Select>组件，可能具有不同的事件签名或期望。

另外，由于我不知道您使用的是哪个库，因此我提供了状态键，该键将您的值跟踪为“ yourSelectKey”，但是您可以用正确的键替换它。如果它是一个嵌套属性（对象的一部分），则可能必须添加散布运算符，以便其他值也被复制过来。

并且您需要将onChange事件处理程序添加到您的选择组件中。我建议您遵循react文档而不是使用该库。

<select
  value={this.state.value}
  onChange={this.handleChange}>
  name={this.state.name}>

    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>

</select>

您面临的其他问题：

• 您需要绑定handleChange到对象实例。您可以在构造函数中使用一行代码来完成此操作，也可以this.handleChange = this.handleChange.bind(this)通过将其声明handleChange为实例变量来进行此操作，就像我在上面所做的那样。
• 正如评论者所说，您应该避免在componentWillMount中进行访存调用，而应使用componentDidMount。对于初学者来说这是一个常见的错误。