Question

我试图在页面上获取一个模式，以根据组件的状态以及名为onChange的更新函数获取并更新其值。

当前看起来像这样：

constructor() {
  this.state = {
   name: '',
  }
}

updatedName = e => {
  this.setState({ name: e.target.value })
}

render() {
                <div className="modal__content__wrapper">
                    <div className="modal--display">
                        <label className='modal--label'> Name</label>
                        <input
                            className='modal--input'
                            onChange={this.updateName}
                            value={this.state.name}
                            />
                    </div>
                </div>
}

这看起来很基础，但我不确定自己做错了什么。

Answer 1

 onChange={this.updateName}

我认为您缺少.bind（this）。尝试

this.updateName.bind(this)

更新

您的函数名称可能有错字。

在返回语句中具有this.updateName，在函数定义中具有this.updatedName（在更新“ d”名称中具有“ d”）。

Answer 2

您缺少super()和return()。调用updatedName时也会拼错。

constructor() {
 super();
  this.state = {
   name: '',
  }
}

updatedName = e => {
 this.setState({ name: e.target.value })
}

render() {
 return(
   <div className="modal__content__wrapper">
     <div className="modal--display">
     <label className='modal--label'> Name</label>
       <input
         className='modal--input'
         onChange={this.updatedName}
         value={this.state.name}
       />
     </div>
    </div>
  )
 }

反应输入状态不使用设置状态的更新功能更新

2 个答案: