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

Question

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

我正在使用的是这样的，这是我的表单输入之一 -

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

它的 onChange() 函数是 -

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

我必须使用回调函数将此表单值传递给父组件，它将状态作为其值，然后这些值将成为父组件的状态.. 此外，我不打算使用任何 refs 或 Id 分配给标签，因为我稍后会有几种形式

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

提前致谢

Answer 1

你可以使用 React link state mixins

https://facebook.github.io/react/docs/two-way-binding-helpers.html

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')} />;
  }
});

您的消息文本字段将link编辑为声明消息

Answer 2

在看到 Ryan Florence 在推特上提到它后，我一直在表单的 onSubmit 操作上使用 form-serialize（我不知道他是否使用它或推荐它，只是想证明我没有发明它):

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>
    );
}

取自http://myappincome.co.uk/using-form-serialize-in-react-js-forms/

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

ReactJS | Getting form values without maintaining states or using getElementByID / refs

forms

reactjs

react-jsx