Question

我有一个文本区域，当输入时会更新状态值，并在文本区域中显示新值。非常简单，可以在台式机和Android手机上正常运行，但在iPhone上无法正常运行。在iPhone上，我打字并没有任何反应（也没有光标）。

我的文本区域

<div>
   <h3>Notes</h3>
   <textarea name="notes" value={this.state.notes} onChange={(e) => this.handleTextChange(e)}></textarea>
</div>

更改状态值的功能

handleTextChange = (e) => {
    console.log("triggering handleTextChange...");
    this.setState({
      [e.target.name]: e.target.value,
      changesWereMade: true
    });
  }

我还尝试了各种方法：

<div>
  <h3>Notes</h3>
  <textarea name="notes" value={this.state.notes} onChange={this.handleTextChange}>{this.state.notes}</textarea>
</div>
<div>
  <h3>Notes</h3>
  <input name="notes" value={this.state.notes} onChange={this.handleTextChange} />  // this does work on iPhone, but I need a textarea
</div>
<div>
  <h3>Notes</h3>
  <textarea name="notes" value={this.state.notes} onChange={(e) => this.handleTextChange(e)}></textarea>
</div>
<div>
  <h3>Notes</h3>
  <textarea name="notes" value={this.state.notes} onChange={(e) => this.handleTextChange(e)}>{this.state.notes}</textarea>
</div>
<form id="noter-save-form" method="POST">
  <textarea id="notes-text-area" name="notes" value={this.state.notes} onChange={(e) => this.handleTextChange(e)}></textarea>
  <input type="submit" value="Save" />
</form>

编辑

还尝试了以下更改：

文本区域更改

<div>
  <h3>Notes handleNoteChanged</h3>
  <textarea name="notes" value={this.state.notes} onChange={this.handleNoteChanged}>{this.state.notes}</textarea>
  <textarea name="notes" value={this.state.notes} onChange={this.handleNoteChanged}></textarea>
</div>

用于在状态更改中更改值的功能

 handleNoteChanged = (e) => {
    console.log("triggering handleNoteChanged...");
    alert(e.target.name, e.target.value);
    const name = e.target.name
    console.log("name = " + name);
    const value = e.target.value
    console.log("value = " + value);
    this.setState({
      notes: value
    });
  }

有人知道我为什么不能在iPhone上输入textarea，但在其他所有内容上都能输入吗？

Answer 1

使用onInput代替onChange

<textarea ... onInput={(e) => ...}></textarea>

ReactJS – TextArea onChange仅在iPhone上不触发

1 个答案: