Javascript Reactjs TextArea对象是只读的,而不是可变的

Javascript Reactjs TextArea对象是只读的,而不是可变的,javascript,reactjs,Javascript,Reactjs,我有一个TextArea对象,不允许输入新文本。起初,我在没有构造函数的情况下尝试了这个方法,但是当我尝试调用我的on change方法时,会得到一些区域,因为它没有绑定到this。添加构造函数来绑定onChange方法会禁止我输入文本 class TextAreaCounter extends React.Component{ constructor(props) { super(props);

我有一个TextArea对象,不允许输入新文本。起初,我在没有构造函数的情况下尝试了这个方法,但是当我尝试调用我的on change方法时,会得到一些区域,因为它没有绑定到
this
。添加构造函数来绑定onChange方法会禁止我输入文本

        class TextAreaCounter extends React.Component{
            constructor(props) {
                super(props);
                this._textChange = this._textChange.bind(this);
            }
            getInitialState() {
                return {
                    text: this.props.text,
                };
            }
            _textChange(ev) {
                this.setState({
                    text: ev.target.value,
                });
            }
            render() {
                return React.DOM.div(null,
                    React.DOM.textarea({
                        value: this.props.text,
                        onChange: this._textChange,
                    }),
                    React.DOM.h3(null, this.props.text.length)
                );
            }
        }
        TextAreaCounter.PropTypes = {
            text: React.PropTypes.string,
        }
        TextAreaCounter.defaultProps = {
            text: '',
        }
        ReactDOM.render(
            React.createElement(TextAreaCounter, {
                text: "billy",
            }),
            document.getElementById("app")
        );

您应该将this.state.text作为值传递给textarea,而不是this.props.text。

我找到了答案

首先,我在渲染方法中使用了
this.props
而不是
this.state
。因此,调用了我的onChange方法,但从未实际更新

其次,
getIntialState
已被弃用,因此我更新为构造函数中的状态对象

       class TextAreaCounter extends React.Component{
            constructor(props) {
                super(props);
                this._textChange = this._textChange.bind(this);
                this.state = {
                    text: this.props.text,
                };
            }
            _textChange(ev) {
                this.setState({
                    text: ev.target.value,
                });
            }
            render() {
                return React.DOM.div(null,
                    React.DOM.textarea({
                        value: this.state.text,
                        onChange: this._textChange,
                    }),
                    React.DOM.h3(null, this.state.text.length)
                );
            }
        }

对的我应该在构造函数中设置一个状态。