javascript - Textarea onchange 在 ReactJS 中延迟触发

Question

我正在用 React 构建一个应用程序，它的一个方面涉及从文本区域记录事件并在应用程序的不同位置实时显示它。我将 textarea 绑定(bind)到一个 onChange 事件并且 onChange 正在触发，但我遇到的问题是 onChange 函数一直在记录一次击键输入，为时已晚。例如，如果我在文本区域中输入“hello”，onChange 监听器将记录并输出“hell”。

代码如下。感谢您的帮助!

组件代码:

export default class StepTwo extends React.Component {

constructor(props) {

        super(props);

        this.state={
            headlineText: '',
        }

        this.writeHeadlineChild = this.writeHeadlineChild.bind(this);


    }

    updateHeadlineValue(evt) {

        this.setState({
                    headlineText: evt.target.value
                })

    }

    writeHeadlineChild(e) {

        e.preventDefault();
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();

        this.props.headWriter(this.state.headlineText, this.state.headlineFont);


    }

        render() {

            return (

        <
        form className = "card-form"
        onChange = {
            (e) => {
                this.writeHeadlineChild(e)
            }
        } >

        <
        div className = "form-group"
        onChange = {
            evt => this.updateHeadlineValue(evt)
        } >
        <
        label htmlFor = "headline"
        className = "form-label" > Your message < /label> <
        textarea className = "form-control"
        id = "headline" > < /textarea> <
        /div> <
        /form>

        <
        /div>
        )
    }

}

以及父组件中的函数:

writeHeadline(t, f) {

    var headline = document.querySelector('.headline');

    function headlinePreview() {
        headline.innerHTML = t;
        headline.style.fontFamily = f;
    }

    headlinePreview();

}

Answer 1

我在这里看到了一些有趣的东西——你正在调用 onChange在 div 和表单上，而不是实际负责传播更改的元素。在这种情况下 textarea节点负责更改，因此我们可以处理状态更新作为仅对该元素的更改的结果。

更新您的组件，以便文本区域处理自己的事件(从 form 和 div 中删除它们)

所以类似于 <textarea onChange={this.handleChange}/>

其次是

handleChange(evt) {
  const { value } = evt.target 
  // followed by any state changes, or props callbacks
  this.setState({ headlineText: value })
}

应该足以管理您的 textarea 的值(value) field 。