我有一个简单的问题。我想,我误解了 ReactJS 的用法。
我想编写一些低级可重用组件来以标准布局构建我的表单。
考虑这样的事情。
var Note = React.createClass({
getInitialState: function() {
return ActionData.Model; //the form model
},
render: function () {
var model = this.state;
return (
<Fieldset id="testId" Legend={Language.Note}>
<SingleColumn Lable="Note">
<Textarea value={model.Text} />
</SingleColumn>
<TwinColumn RightLable="Date" LeftLable="">
<DatePicker ReadOnly="true" Date={model.DisplayDate} />
<Checkbox Title="show " />
</TwinColumn>
<input type="button" value="Save" onClick={this.save} />
</Fieldset>
)
},
save: function () {
var model = this.state;
//save the model here ... .
}
});
$(function () {
ReactDOM.render(<Note />, $("#myContent")[0]);
})
例如在“Textarea”组件中
var Textarea = React.createClass({
getInitialState: function() {
return {
value: this.props.value
};
},
render: function () {
return <input type="text" className="form-control" value={this.state.value} onChange={e => this.setState({value: e.target.value})} />
}
});
如何在“文本区域”更改状态时更新“注释”组件状态? (执行类似于 MVVM 框架的操作)。
我走的方向正确吗?!
ReactJs有能力做这样的事情吗!?
最佳答案
您应该通过 props 将函数从 Note 组件传递到 Textarea 组件:
<Textarea value={model.Text} onValueChange={(value) => this.setState({ value })} />
这样你的子组件Textarea
就可以简单地调用传递的onValueChange
函数:
return (
<input type="text" className="form-control"
value={this.state.value}
onChange={e => this.props.onValueChange(e.target.value)} />
);
关于reactjs - 如何在Reactjs中实现类似MVVM的框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39227199/