Question

我有这个动态填充的dropdonw。当用户选择一个项目时，它应该设置

使用'selectedValue'说明'SelectedValue'。我编写了folllowng代码，但是当我运行此代码时，alert()始终显示旧值而不是新选择的值。那是为什么？

反应类中的函数是这个

ddlProdCatsChanegeEvent: function(e) {

  

   if (this.state.isMounted)

   {

       var ele = document.getElementById('ddlCategories');

       var seleValue = ele.options[ele.selectedIndex].text;

       this.setState({selectedValue:seleValue});

       alert(this.state.selectedValue);//this always display the old selected value NOT THE new one

   }

},

状态是这样的：

getInitialState:function(){

   return{data1:[], data2:[], isMounted:false, selectedValue:''}

}

Answer 1

首先我将建议您使用refs来访问dom元素而不是普通的javascript。不是必要的，而是因为它的JSX语法，你可以使用它。

其次，setState需要一些时间来改变状态，这就是你看到之前选择的值的原因，因为它在触发警报之前没有被更改过。

将警告框置于setState回调方法中

this.setState({selectedValue: value}, function(){
        alert(this.state.selectedValue);
      });

完整的代码。

var Hello = React.createClass({
   getInitialState: function() {

   return{ selectedValue:''}
   },
   handleChange: function(e) {

        var value = ReactDOM.findDOMNode(this.refs.selectValue).value;
      this.setState({selectedValue: value}, function(){
        alert(this.state.selectedValue);
      });

    },
  render: function() {

    return (<div>
          Hello {this.props.name}
          <div>
          <select ref="selectValue" onChange={this.handleChange}>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
          </div>
          </div>
  )}
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<强> JSFIDDLE

Answer 2

<强>更新看看this example

高度阻止直接操纵DOM或使用getElementById()等方法。所以写一个解决方案w.r.t.你的代码是错的。相反，我将放弃一个示例，旨在帮助您了解反应如何工作以及如何实现您的意图。

你总是可以使用ReactDOM，但这可能是一种过度杀伤力。您可以使用event.target.value直接从<select />框中获取更新后的值。如何填充<select />框完全取决于您。我更喜欢使用Array.map()来迭代数据并返回一组<option /> s。

另请注意，() => {}是来自es6的箭头功能。您可以随时使用es5 function() {}替换它。

import React from 'react';

class SelectExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: 0
    }
    this.updateValue = this.updateValue.bind(this);
  }

  updateValue(value) {
    this.setState({
      selectedValue: value
    }, () => alert(value));
  }

  render() {
    const dataSet = [1, 2, 3, 4];
    return (
      <div>
        <select value={this.state.selectedValue} onChange={(e) => this.updateValue(+e.target.value)}>
          <option value={0}>Default Value</option>
          {
            dataSet.map((item, idx) => <option value={item} key={idx}>{"Example " + item}</option>)
          }
        </select>
      </div>
    )
  }
}

此代码未经过测试。所以你可能想要清除一些错误，如果有的话。您将使用document.getElementById完全反对React的用例。请将您的代码更改为我在此处发布的内容。

另请阅读Controlled Component

如何从选定的下拉列表中获取最新值

2 个答案: