Forms ReactJS |在不维护状态或使用getElementByID/refs的情况下获取表单值

我是新手，正在寻找一些获得表单值的优化方法

我使用的是这样的，这是我的一个表单输入-

<input type="text" value={this.state.name} onChange={this.onNameChange} />

我必须使用回调函数将这个表单值传递给父组件，回调函数将状态作为它的值，然后这些值将成为父组件的状态。。 此外，我不打算使用任何refs或Id来指定标记，因为稍后我将有几个表单

是否有任何不使用状态获取表单值的有效方法

---

提前感谢

您可以使用react-link-state-mixin

var LinkedStateMixin=require（'react-addons-linked-state-mixin'）；
var WithLink=React.createClass({
mixin:[LinkedStateMixin]，
getInitialState:函数（）{
返回{message:'Hello！'}；
},
render:function（）{
返回；
}
});

---

您的消息文本字段将链接到状态消息

您可以使用react link state mixin

var LinkedStateMixin=require（'react-addons-linked-state-mixin'）；
var WithLink=React.createClass({
mixin:[LinkedStateMixin]，
getInitialState:函数（）{
返回{message:'Hello！'}；
},
render:function（）{
返回；
}
});

您的消息文本字段将链接到状态消息

，在看到Ryan Florence在twitter上提到该消息后，我一直在表单的onSubmit操作中使用该消息（我不知道他是否使用或推荐该消息，只是试图表明我没有发明它）：

onFormSubmit:函数（事件）{
让formData=serializeForm（event.target，{hash:true}）；
//formData={foo:'bar'}
}
渲染：函数（）{
返回(
);
}

摘自

在看到Ryan Florence在twitter上提到该表单后，我一直在使用该表单的onSubmit操作（我不知道他是否使用或推荐该表单，只是想表明我没有发明它）：

onFormSubmit:函数（事件）{
让formData=serializeForm（event.target，{hash:true}）；
//formData={foo:'bar'}
}
渲染：函数（）{
返回(
);
}

---

摘自

除更改处理程序外，在react中获取表单字段值的唯一正确方法是使用ref。除更改处理程序外，在react中获取表单字段值的唯一正确方法是使用ref.hi@MattDuFeu，感谢您的回复，到目前为止，这是最有帮助和最有趣的答案，因为它让我意识到一个新的npm包，我实际上在同一个页面上有多个表单，我正在努力实现它，如果你有任何有用的链接以优化的方式处理多个表单，请分享它的URL..Thankshi@Mattdufee，感谢你的回复，到目前为止，这是最有帮助和最有趣的答案，因为它让我意识到一个新的npm包，我实际上在同一个页面上有多个表单，我正在努力实现它，如果你有任何有用的链接，以优化的方式处理多个表单，请分享它的URL..谢谢

onNameChange: function(e){
  this.setState({
    name: e.target.value
  })
}

var LinkedStateMixin = require('react-addons-linked-state-mixin');

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

onFormSubmit: function (event) {
    let formData = serializeForm(event.target, { hash: true });
    // formData = { foo: 'bar' } 
}

render: function () {
    return (
        <form onSubmit={this.handleSubmit}>
            <input type="text" name="foo" value="bar"/>
            <input type="submit" value="do it!"/>
        </form>
    );
}