ReactJS – TextArea onChange 仅在 iPhone 上不触发答案

【问题标题】：ReactJS – TextArea onChange Not Triggering on iPhone onlyReactJS – TextArea onChange 仅在 iPhone 上不触发
【发布时间】：2018-07-20 14:35:05
【问题描述】：

我有一个文本区域，它会在输入时更新 state 中的值，并在文本区域中显示新值。非常简单，在台式机和安卓手机上都能正常工作，但在 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 而在其他任何东西上都可以？

【问题讨论】：

尝试在handleTextChange中添加alert(e.target.name, e.target.value);并在你的iphone上检查。顺便提一句。不要这样做 (e) => this.handleTextChange(e)，只是 this.handleTextChange。不要这样做[e.target.name]: e.target.value 通过常量将它们从 setState 中提取出来
我尝试了这些更改，但没有运气。（以上编辑）

标签： javascript ios reactjs textarea onchange

【解决方案1】：

使用onInput 代替onChange

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

【讨论】：