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

IT技术 javascript reactjs drop-down-menu
2021-05-25 19:37:01

一个例子。

red 从一开始就被选中。

然后我选择green. 也就是说，从red到green。

我可以green在event.currentTarget.value. 但是我怎么得到以前的red？

<select className="foo" onChange={this.onSectChange} value="red">
    <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>

onSectChange = (event) => {

    let prevVal = event.??? // How to get a previous value, that is Red
    let newVal = event.currentTarget.value; // Green - is a new value just selected, not previous

}

我的意思是，React 是否在创建时提供了开箱即用的功能SyntheticEvent？还是我仍然需要破解才能获得它？

4个回答

您可以使用 React 的 受控组件来实现这一点。该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>

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

SyntheticEvent 只是浏览器本机事件的包装器，它公开某些浏览器事件。

想到的最接近您要执行的操作的是Event.originalTarget，但它是仅在 Mozilla 中实现的实验性功能。

所以，回答你的问题：不，React 没有提供开箱即用的功能。我不会说你需要一个黑客来获得你的下拉菜单的先前值。

例如，您可以使用componentWillReceiveProps并nextProps与this.props.

如果我误解了您的问题，请提供更多详细信息。

使用我们所说的“受控”输入。这是对受控和非受控输入概念的一个很好的解释。

在你的情况下：

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

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

这存储在：e.target.defaultValue

其它你可能感兴趣的问题
上一篇使用 react 定期运行 fetch 下一篇语法错误：意外的标记，应为“</>”