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

问题描述

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

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”。

感谢您的帮助！

解决方法

您需要更改，

<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，该文本用户类型已更改。

reactjs reactjs