Question

我正在建立一个应用程序，其中一个方面涉及记录textarea中的活动并在应用程序的不同位置实时显示。我有一个textarea绑定到一个onChange事件并且onChange正在触发，但我遇到的问题是onChange函数一直记录输入一键击。例如，如果我输入＆＃34;你好＆＃34;在textarea中，onChange监听器会记录并输出＆＃34; hell＆＃34;。

代码如下。谢谢你的帮助！

组件代码：

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

我在这里看到一些有趣的东西 - 你在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字段的值。

Answer 2

看起来您的标题与反应状态变化没有直接联系。你的表格有它的＆＃39;自己的onchange()函数会在表单本身发生变化时触发，但它会读取不受反应控制的数据，因此无法保证数据和＃39 ; s将是输入设置的状态的准确反映。

知道在设置状态的任何时候调用Component的render()方法，您可以在writeHeadline()方法之后调用父组件中的render()方法来利用它被调用，但在return()语句之前。理想情况下，应使用this.state.headlineText作为文本参数。

Textarea onchange在ReactJS后期开火

2 个答案: