ReactJS 中的 Textarea onchange 触发较晚答案

【问题标题】：Textarea onchange firing late in ReactJSReactJS 中的 Textarea onchange 触发较晚
【发布时间】：2017-12-25 19:20:47
【问题描述】：

我正在构建一个 react 应用程序，其中一个方面涉及记录来自 textarea 的活动并在应用程序的不同位置实时显示它。我将 textarea 绑定到 onChange 事件并且 onChange 正在触发，但我遇到的问题是 onChange 函数一直在记录输入，为时已晚。例如，如果我在 textarea 中输入“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();

}

【问题讨论】：

如果将 onchange 替换为 onkeyup 会发生什么？
根据您想要捕获更改的时间使用 onkeyup 或 onkeydown。
谢谢大家的帮助。原来问题是由我处理状态的方式引起的。来自文本字段的信息被保存为“待定状态值”，并且没有在适当的时间传递。有一个很好的解释in this post

标签： javascript reactjs

【解决方案1】：

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

更新您的组件，以便 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 字段的值。

【讨论】：

【解决方案2】：

您的标题似乎与反应状态更改没有直接关系。您的表单有自己的onchange() 函数，该函数会在表单本身发生变化时触发，但它正在读取不受反应控制的数据，因此不能保证数据将准确反映设置的状态通过输入。

知道任何时候设置状态都会调用组件的 render() 方法，您可以通过在调用 render() 方法之后、但在return() 声明。理想情况下，它应该使用this.state.headlineText 作为文本参数。

【讨论】：