代码之家 › 专栏 › 技术社区 › Hamed Minaee

Select in React不反映状态更改

reactjs javascript

Hamed Minaee · 技术社区 · 7 年前

当我尝试在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;
}

现在,当我尝试更改选择框时,用户界面中的任何内容都不会更改,因此选择框不会显示更新的选择,但我清楚地看到状态已更新。为什么更改没有反映在选择框中。

知道吗?

3 回复 | 直到 7 年前

Rohith Murali 7 年前

将值设置为 setState 作为,

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

因为 value prop应具有所选的值 option

njorombe_sn 7 年前

出于某种原因,您向setstate函数提供了一个函数。我个人发现,制作一份州的副本,并将财产设置得更好。

onDropDownChange = e => {
  let val = this.state.myArr.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
  );

  let prevState = { ...this.state };
  prevState[name] = key;
  prevState["displayName"] = val[0].displayName;

  this.setState({ ...this.state, prevState });
  console.log(this.state);
};

Lafi 7 年前

select上的值应该是选项标记上的值之一,但是作为这些选项上的值,您要映射话题但你做到了 value={this.state.displayName} 在选择标签上? 如果你把它换成 value={this.state.topic} 它将工作,因为它使用相同的数据映射。这是一个 codesandbox 有效期

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前