React.js：contentEditable的onChange事件

Question

React.js：contentEditable的onChange事件

189

如何监听基于 contentEditable 控件的更改事件？

var Number = React.createClass({
    render: function() {
        return <div>
            <span contentEditable={true} onChange={this.onChange}>
                {this.state.value}
            </span>
            =
            {this.state.value}
        </div>;
    },
    onChange: function(v) {
        // Doesn't fire :(
        console.log('changed', v);
    },
    getInitialState: function() {
        return {value: '123'}
    }
});

React.renderComponent(<Number />, document.body);

Code on JSFiddle.

- NVI

20

我曾经也遇到过这个问题，而且对于推荐的答案也有问题，因此我决定将其设置为不受控制。也就是说，我将“initialValue”放入“state”中，并在“render”中使用它，但我不让React进一步更新它。 - Dan Abramov

1

你的 JSFiddle 不起作用。 - Green

1

我通过改变方法避免了与contentEditable的斗争 - 我使用了一个带有readonly属性的input，而不是一个span或paragraph。 - ovidiu-miu

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maksym Popov · Answer 1

我尝试使用圣罗兰的示例：

<div
  onBlur={e => {
    console.log(e.currentTarget.textContent);
  }}
  contentEditable
  suppressContentEditableWarning={true}
>
    <p>Lorem ipsum dolor.</p>
</div>

一切都运行得很完美，直到我尝试在状态中设置这个值。当我使用一个调用setState(e.currentTarget.textContent)的函数组件时，我得到了currentTarget为空的结果。 setState是异步工作的，而currentTarget在那里不可用。

在React 17.0.2中对我有效的解决方法是使用e.target.innerText：

<div
  onBlur={e => setState(e.target.innerText)}
  contentEditable
  suppressContentEditableWarning={true}
>
    <p>Lorem ipsum dolor.</p>
</div>