Question

我有输入文字，但不能写！

我试图这样控制它：

handleUserInput(e){
   console.log('ok')
   this.setState({
      newPlayer: e.target.value
   })
}

<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={e => this.handleUserInput(e.target.value)} />

但是，即使我只是这样输入：

<input type="text" />

我不能写。

这让我发疯了...

你知道我在做什么错吗？

谢谢

Answer 1

handleUserInput(e){
   console.log('ok')
   this.setState({
      newPlayer: e.target.value
   })
}

很可能您必须将此值绑定到构造函数内部的处理函数，

this.handleUserInput= this.handleUserInput.bind(this);

或将处理程序功能更改为如下所示的粗箭头功能

const handleUserInput = (e)=>{//write your code inside}

但是在此之前，请检查开发者控制台并在此处更新错误

Answer 2

您将状态设置为错误状态，正在将e.target.value传递给handleChange函数，并在设置状态时再次使用event.target.value

按如下所示更改您的输入，然后尝试

<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={e => this.handleUserInput(e)} />

或如下更改handleUserInput

handleUserInput(value){
  console.log('ok')
  this.setState({
    newPlayer: value
   })
}

Answer 3

这样定义

handleUserInput(value){
   console.log('ok')
   this.setState({
      newPlayer: value
   })
}

因为您已经传递了输入值e.target.value

onChange={e => this.handleUserInput(e.target.value)}

Answer 4

状态确实同步更新。这意味着当React实际上执行更新时，它是在稍后的时间，并且事件的值会丢失。这是因为React使用合成事件包装器包装所有DOM事件以确保在所有浏览器之间的兼容性，并且该包装器会在一段时间后被清空以供重用。我的建议是将事件值简单地存储在变量中，以确保在状态更新发生时仍保留其值。

handleUserInput(e){
  console.log('ok')
  const eventValue = e.target.value;
  this.setState({
  newPlayer: eventValue
})
}

此外，您以event.target.value作为参数调用该函数，然后再次访问.target.value，因此它不起作用。

onChange={e => this.handleUserInput(e)}

并且如上所述，在handleUserInput内部通过e.target.value访问它，您以前的使用方式暗示您正在尝试访问e.target.value.target.value的函数内部。

Answer 5

它具有代码错误，您在函数中传递了事件目标值，但仅预期事件

尝试：

handleUserInput(e){
   console.log('ok')
   this.setState({
      newPlayer: e.target.value
   })
}

<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={this.handleUserInput} />

React输入无法输入任何内容

5 个答案: