Question

一个例子。从一开始就选择红色。然后我选择绿色。也就是说，从红色到绿色。我可以在event.currentTarget.value中获得新值green。但是我怎么得到以前的红色？＆lt; select className =＆＃34; foo＆＃34; onChange = {this.onSectChange} value =＆＃34; red＆＃34;＆gt; ＆lt;选项值=＆＃34;没有颜色＆＃34;＆gt;没有颜色＆lt; /选项＆gt; ＆lt; option value =＆＃34; red＆＃34;＆gt; Red＆lt; / option＆gt; //这个被选中了＆lt; option value =＆＃34; green＆＃34;＆gt; Green＆lt; / option＆gt; //这个我会选择的＆lt; option value =＆＃34; blue＆＃34;＆gt; Blue＆lt; / option＆gt; ＆LT; /选择＆GT; onSectChange =（event）=＆gt; { 让prevVal =事件。??? //如何获取之前的值，即红色让newVal = event.currentTarget.value; //绿色 - 是刚刚选择的新值，而不是之前的值 } 我的意思是，React是否提供了开箱即用的功能以及他们的SyntheticEvent创建？或者我仍然需要破解它？

Answer 1

您可以使用React的controlled components来实现此目的。 state将具有之前的值。

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

<script type="text/babel">
class Select extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      select: 'red',
    }
    this.onSectChange = this.onSectChange.bind(this)
  }
  
  onSectChange(e) {
    var newVal = e.target.value
    console.log(this.state.select, newVal)
    this.setState({
      select: newVal,
    })
  }
  
  render() {
    return <select className="foo" onChange={this.onSectChange} value={this.state.select}>
    <option value="no color">No Color</option>
    <option value="red">Red</option>  // this one is selected
    <option value="green">Green</option> // this one I will select
    <option value="blue">Blue</option>
    </select>  
  }

}
ReactDOM.render(<Select/>, document.getElementById('app'))
</script>

Answer 2

currentTarget是 browsers 支持的属性，它与React本身没有任何关系。

SyntheticEvent只是浏览器本机事件的包装器，它暴露了某些浏览器事件。

您想要做的最接近的事情是Event.originalTarget，但它只是在Mozilla中实现的实验性功能。

所以，回答你的问题：不，React没有提供开箱即用的功能。而且我不会说你需要 hack 来获取下拉菜单的上一个值。

例如，您可以使用componentWillReceiveProps并将nextProps与this.props进行比较。

如果我误解了你的问题，请提供更多细节。

Answer 3

使用我们称之为＆＃34;控制＆＃34;输入。 Here's a good explanation of the concept of controlled and uncontrolled inputs.

在你的情况下：

在构造函数中设置初始状态

constructor(props) {
    super(props);

    this.state = {dropdownValue: 'red'};
}

将选择输入的值设置为状态

中存储的值

<select className="foo" onChange={this.onSectChange} value={this.state.dropdownValue}>

然后在onChange事件处理函数中，您可以获取之前的值，因为它仍然存储在状态中，然后使用事件中的新值覆盖它

onSectChange = (event) => {
    // You haven't yet updated the state, so you still have access to the old value.
    let prevVal = this.state.dropdownValue; 
    let newVal = event.currentTarget.value; 

    // You need to set the new value in your state so the component is
    // rerendered to show the new value as selected
    this.setState({dropdownValue: newVal});
}

Answer 4

此文件存储在：e.target.defaultValue

Answer 5

使用event.target.value将返回您先前选择的值

如何在React中获取<select>的先前值？

5 个答案: