react怎么獲取輸入框的值

小億
123
2024-01-03 11:22:11

要獲取輸入框的值，你可以使用React的受控組件的方式。
首先，在你的組件的state中定義一個(gè)變量來存儲(chǔ)輸入框的值。例如：

constructor(props) {
  super(props);
  this.state = {
    inputValue: ''
  };
}

接下來，在輸入框元素上添加一個(gè)onChange事件處理函數(shù)，該函數(shù)將更新state中的inputValue。例如：

handleChange(event) {
  this.setState({inputValue: event.target.value});
}

然后，在render方法中將輸入框的值綁定到state中的inputValue，并將onChange事件處理函數(shù)綁定到輸入框上。例如：

render() {
  return (
    
      <input type="text" 
        value={this.state.inputValue} 
        onChange={this.handleChange.bind(this)} 
      />
      
    
  );}

最后，在事件處理函數(shù)中可以通過訪問state中的inputValue來獲取輸入框的值。例如：

handleClick() {
  console.log(this.state.inputValue);
}

這樣，當(dāng)用戶輸入內(nèi)容時(shí)，輸入框的值將被存儲(chǔ)在組件的state中，并可以通過訪問state來獲取輸入框的值。

0 踩