我有一个 TextArea 对象,该对象不允许输入新文本。最初我在没有构造函数的情况下尝试过此操作,但当我尝试调用我的更改方法时会得到区域,因为它未绑定(bind)到 this
。添加构造函数来绑定(bind) 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.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)
);
}
}
关于javascript - Reactjs TextArea 对象是只读的而不是可变的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44217550/