Question

我一直在玩ReactJS，我真的很喜欢这个框架。

我也在尝试遵循创建无状态组件的规则。

我有一个Settings组件，其中包含一个小孩SettingsForm和一个SettingsWidget。

Settings包含所有状态，只将其作为道具传递给表单和窗口小部件。

这很有效（并且可以扩展），因为当Settings中的状态更新时，它会传播到所有子组件。

var Settings = React.createClass({
    getInitialState: function() {
        settings: {}
    }
})

在SettingsForm访问输入值以将其传递给父组件时，我不是100％确定是最佳做法。

我知道我可以使用refs以及双向绑定来实现这一目标，但感觉不像“类似ReactJS”。

有没有更好的方法来完成这个我不知道的事情？为了完整起见，我已将相关代码包含在我的SettingsForm组件

中

var SettingsForm = React.createClass({
  getInitialState: function() {
    return {
      changed: false
    }
  },
  handleChange: function(event) {    
    this.setState({changed: true})
    this.props.handleChange(
      this.refs.emailInputFieldRef.getDOMNode().value,
      this.refs.firstNameInputFieldRef.getDOMNode().value
    )    
  },
  handleSubmit: function(event) {
    event.preventDefault();
    // Access and pass on input values to parent callback so state is updated
    this.props.handleUpdate(
      this.refs.emailInputFieldRef.getDOMNode().value,
      this.refs.firstNameInputFieldRef.getDOMNode().value
    )
    this.setState(this.getInitialState());
  },
  ...
}

Answer 1

现在有一个Mixin，您可以使用它将输入值链接到状态，称为LinkedStateMixin，这正是您正在寻找的......

var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

然后，您需要做的就是修改父组件上的处理函数以将输入作为变量，并将该函数作为prop传递给子组件。当你想处理表单时，在props中调用该函数并将状态（与Mixin绑定）作为变量发送。

React Docs - React Link

ReactJS：创建表单时的最佳实践访问输入值

1 个答案: