如何从React中的子组件获取值

所以我刚刚开始使用React，并且无法收集子组件中输入的输入值。 基本上，我正在为我正在制作的大型表单创建不同的组件，然后在包含组件中，我想收集我正在调用数据的对象中的子项的所有输入值，然后将收集的输入发送到POST AJAX请求（您可以在我制作的最后一个组件中看到一个示例）。 当我在组件内部时，我可以很容易地提取值，但是从父组件中拉出它我还没想到。

提前致谢。 现在就通过React解决这些问题，所以关于如何更好地构建这个问题的任何建议，我都是耳朵！

这是我的组件：

第一部分

var StepOne = React.createClass({ getInitialState: function() { return {title: '', address: '', location: ''}; }, titleChange: function(e) { this.setState({title: e.target.value}); }, addressChange: function(e) { this.setState({address: e.target.value}); }, locationChange: function(e) { this.setState({location: e.target.value}); }, render: function() { return ( 
 
 
 Title  
 
 Address  
 
 Location  
 
 
 ); }, // render }); // end of component 

第二部分

 var StepTwo = React.createClass({ getInitialState: function() { return {name: '', quantity: '', price: ''} }, nameChange: function(e) { this.setState({name: e.target.value}); }, quantityChange: function(e) { this.setState({quantity: e.target.value}); }, priceChange: function(e) { this.setState({price: e.target.value}); }, render: function() { return ( 
 
 
 
 
 Ticket Name  
 
 Quantity Available  
 
 Price  
 
 
 
 
 ); } }); 

收集数据并提交ajax请求的最终组件

 EventCreation = React.createClass({ getInitialState: function(){ return {} }, submit: function (e){ var self e.preventDefault() self = this var data = { // I want to be able to collect the values into this object then send it in the ajax request. I thought this sort of thing would work below: title: this.state.title, } // Submit form via jQuery/AJAX $.ajax({ type: 'POST', url: '/some/url', data: data }) .done(function(data) { self.clearForm() }) .fail(function(jqXhr) { console.log('failed to register'); }); }, render: function() { return( 
   // submit button here 
 ); } }); 

Answer 1

在子组件中定义返回所需数据的方法，然后在渲染子项时在父组件中定义方法，稍后定义引用，以便在需要检索所需数据时可以在子项上调用这些方法。

 StepOne = React.createClass({ getData: function() { return this.state; } }); StepTwo = React.createClass({ getData: function() { return this.state; } }); EventCreation = React.createClass({ submit: function() { var data = Object.assign( {}, this._stepOne.getData(), this._stepTwo.getData() ); // ... do AJAX }, render: function() { return (  this._stepOne = ref} />  this._stepTwo = ref} /> ); } }); 

Answer 2

一般来说，您需要将一个函数从父级传递给子级作为道具。 当孩子的数据发生变化时，他们会将该function称为回调。

这有一个很大的好处，就是让你的父组件跟踪你的应用程序中的所有状态，并将状态片作为道具传递给它的子节点，而不是让每个组件跟踪它自己的内部状态。 （ 这是数据流的React方法 。）

您的组件可能如下所示：

 var StepOne = React.createClass({ handleOnChange: function(e){ this.props.handleChange(e.target.name, e.target.value); }, render: function() { return ( 
 
 
 Title  
 ... 
 
 ); }, // render }); // end of component EventCreation = React.createClass({ getInitialState: function(){ return {} }, handleChange: function(name, value){ var tmp = {}; tmp[name] = value; this.setState(tmp); }, submit: function (e){ var self e.preventDefault() self = this var data = { // I want to be able to collect the values into this object then send it in the ajax request. I thought this sort of thing would work below: title: this.state.title, } // Submit form via jQuery/AJAX $.ajax({ type: 'POST', url: '/some/url', data: data }) .done(function(data) { self.clearForm() }) .fail(function(jqXhr) { console.log('failed to register'); }); }, render: function() { return( 
   // submit button here 
 ); } }); 

Answer 3

首先，您需要设置一些参考 。 它将允许您轻松地访问一些DOM元素。 例如：

然后，在您的submit方法中，您可以像这样获取它：

 var data = { name: this.refs.stepOneName.value } 

编辑1：您还必须为组件添加ref ：

render：function（）{return（//这里提交按钮）; 然后，访问您的元素：

 var data = { name: this.refs.steOneRef.refs.stepOneName.value } 

我JSFiddled你的代码ant似乎对我来说没问题。

Answer 4

这是一个更松散耦合的解决方案。 这取决于您为每个元素设置id 。 基本上你正在做的是调用将获取和设置数据的父组件onChange函数。

 var StepOne = React.createClass({ getInitialState: function() { return {title: '', address: '', location: ''}; }, _onChange(e) { // set your state if needed // call the parent function this.props.onChange( e.target.id, e.target.value ) }, render: function() { return ( 
 
 
 Title  
 
 Address  
 
 Location  
 
 
 ); }, // render }); // end of component var StepTwo = React.createClass({ getInitialState: function() { return {name: '', quantity: '', price: ''} }, _onChange(e) { // set your state if needed // call the parent function this.props.onChange( e.target.id, e.target.value ) }, render: function() { return ( 
 
 
 
 
 Ticket Name  
 
 Quantity Available  
 
 Price  
 
 
 
 
 ); } EventCreation = React.createClass({ getInitialState: function(){ return {} }, _onChange(id, value) { this.formData[id] = value; }, submit: function (e){ var self e.preventDefault() self = this // Submit form via jQuery/AJAX $.ajax({ type: 'POST', url: '/some/url', data: this.formData }) .done(function(data) { self.clearForm() }) .fail(function(jqXhr) { console.log('failed to register'); }); }, render: function() { return( 
   // submit button here 
 ); } });