反应选择组件值不更新。

只是想知道我在做什么错在这里。当我从列表中选择一个值时，组件输入字段没有被填入值。反应选择组件值不更新。

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> 
    ) 
}

}

来源

2017-08-29 Jasonca1

不要在'componentWillMount'上使用ajax请求！顺便说一下这个方法基本上就是构造器。 https://facebook.github.io/react/docs/react-component.html#componentwillmount –

你在选择组件中使用了什么库？ –

@JulianSoro我正在使用react-select – Jasonca1

你的主要问题是你handleChange方法不设置值

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

与香草<select>组件，onChange事件必须在event.target一个一个DOMElement参考，并反应提供DOM元素上的value prop，你可以使用它来更新你的状态。您是第三方<Select>组件可能有不同的事件签名或期望。另外，由于我不知道您使用的是什么库，因此我提供了可将您的值追踪为“yourSelectKey”的状态键，但您可以用正确的键替换它。如果它是嵌套属性（对象的一部分），则可能需要添加spread运算符，以便其他值也可以被复制。

而且您需要将onChange事件处理程序添加到您选择的组件。我建议您按照react docs而不是使用该库。

<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。这是初学者常犯的错误。

来源

2017-08-29 21:34:11

@ Jasonca1我修改了这个答案，为'

反应选择组件值不更新。

回答