反應 onChange 設置但輸入仍然是只讀的

Question

我正在處理 ReactJs 中的表單，並使用 state 中的值填充輸入字段。但是我的輸入字段被創建為只讀。 即使我設置了 onChange function。

handleNameChange(event) {
   myEvent.name = event.target.value;
}       

render(){
   return(  
       <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/>
   );
}

我不明白這種行為。 有人可以解釋一下嗎？ 謝謝

Answer 1

原因是您使用狀態變量來存儲文本字段值，但是您沒有更新onChange事件的值，因為您的文本字段是只讀的，請嘗試以下操作：

handleNameChange(event) {
    this.setState({name: event.target.value});
}       

render(){
    return(  
        <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/>
    );
}

Answer 2

要在React中更改組件的狀態，您需要使用this.setState 。 調用該方法后，將使用您設置的新數據重新呈現該組件。 這是使用setState的示例：

 class Example extends React.Component { constructor() { super(); this.state = { name: 'Harambe' }; this.handleNameChange = this.handleNameChange.bind(this); } handleNameChange(event) { this.setState({ name: event.target.value }); } render() { console.log(this.state); return( <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange} value={this.state.name}/> ); } } ReactDOM.render(<Example/>, document.getElementById('View')); 

 <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="View"></div> 

Answer 3

如果你使用的是基於功能的組件，那么你可以通過使用useState hook 這種方式來解決這個問題

import {useState} from "react";
export default Example = (props) =>{
   let [text, setText] = useState(props.value)
   function update(e){
      setText(e.current.value);
      // here you can add whatever additional functionality that you want to add.
      props.value = e.current.value; 
   }

   return (
      <><input type="text" value={text} onChange={update} /></>
   )
}

useState 只是讓它重新渲染它。