reactjs - ReactJs：在“span”标签 ES6 中监听事件

Question

我有一个基于类的组件，其中包含以下代码：

state = {value: "Hello", input: null}

inputChangeHandler = (event) => {
    this.setState({input: event.target.value});
} 

changeValueHandler = () => {
    this.setState({value: this.state.input})
}

render(){
    <div>
        <h1>{this.state.value}</h1>
        <input type="text" onChange={this.inputChangeHandler} />
        <button onClick={(event) => this.inputChangeHandler(event)}>Save input</button>
    </div>
}

这有效：当我在输入框中键入“世界”时，然后按保存。标题从“Hello”变为“World”。

但是，我想要一个可扩展的输入框来支持更长的输入段落。所以我将<input>标签替换为<span>：

<span type="text" role="textbox" onChange={this.inputChangeHandler} contentEditable={true} />

这不起作用：当我在跨度框中键入“世界”时，然后按保存。标题仍然是默认的“Hello”，即使我打算将其更改为“World”。

感谢您的帮助！

标签： reactjs

Answer 1

你需要改变，

<span type="text" role="textbox" onChange={this.inputChangeHandler} contentEditable={true} />

至：

<span contentEditable="true" onInput={this.inputChangeHandler}>
  Some text{" "}
</span>

所以在 contentEditable 中你必须使用它onInput来捕获更改事件。

然后inputChangeHandler像这样修改，

  inputChangeHandler = (event) => {
    this.setState({ input: event.currentTarget.textContent });
  };

在这里，我们需要考虑event.currentTarget.textContent文本用户类型的变化。