Question

我有一个简单的问题。我想，我误解了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})} />
    }
});

如何更新'Textarea'更改状态的'Note'组件状态？（执行类似MVVM框架的东西）。

我走向正确的方向吗？！

ReactJs是否有能力做这些事情？？

Answer 1

您应该通过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中实现类似MVVM的框架

1 个答案: