Question

当我尝试选择reactjs时，会发生一些奇怪的事情。这是我的代码：

onDropDownChange=(e)=>{
    let val = this.props.contactUsReducer.contactUsList.filter(function(item) {
        return item.topic == e.target.value
    });
    let key= e.target.value;
    let name= e.target.name;
    console.log("key "+key+"  val: "+val[0].displayName+" name:"+name);
    this.setState(prevState => {
        return ( {...prevState, [name]:key, displayName: val[0].displayName})
    }, function () {
        console.log(this.state);
    });
}

在我的渲染中我有

<select type="select" className="text-input flex-row-right-item" onChange={this.onDropDownChange} name="topic" value={this.state.displayName}>
  {this.createSelectItems(this.props.contactUsReducer.contactUsList)}
</select>

此处还有我的助手功能：

createSelectItems=(itemsList)=> {
    let items = [];

    for (let i = 0; i < itemsList.length; i++) {
            items.push(<option key={itemsList[i].topic} value={itemsList[i].topic}>{itemsList[i].displayName}</option>);

    }
    return items;
}

现在，当我尝试更改选择框时，UI中没有任何内容会发生变化，因此选择框不会显示更新的选择，但我清楚地看到状态已更新。为什么更改不会反映在选择框中。

有什么想法吗？

Answer 1

由于某种原因，您正在为setState函数提供函数。我个人觉得制作一个州的副本，并设置属性更好地工作。

Answer 2

select上的值应该是options标记上的值之一，但是作为这些选项的值，您要映射主题，但是您在select标记上创建了value={this.state.displayName} ？如果用value={this.state.topic}替换它，它将起作用，因为它使用相同的数据映射。这是一个codesandbox exp。

Answer 3

更改setState中的displayName设置为，

this.setState(prevState => {
        return ( {...prevState, [name]:key, displayName: key})
    }, function () {
        console.log(this.state);
    });

因为value道具应具有所选option

的值

选择in react不反映状态变化

3 个答案: