React中具有多个状态值的多个输入

Question

我刚刚开始使用React。我试图建立一个多输入字段的表单。加载组件时，这些字段具有默认值。该值是可编辑的。

我通过迭代数据来创建字段。一旦编辑了字段，我一直在努力设置状态。这是我迄今为止所掌握的。

var Form = React.createClass({ 
    loadStuff:function(){ 
    console.log(this.props.products); 
    this.setState({data: this.props.products}); 
    }, 
    onChange: function(opt){ 
    this.setState({data: this.state.data}) 
    }, 
    getInitialState: function(){ 
    return {data: []}; 
    }, 
    componentDidMount: function(){ 
    this.loadStuff(); 
    }, 
    render: function(){ 
    return(
     <div> 
      <InputList data={this.state.data} onChange={this.onChange}/> 
     </div> 
    ) 
    } 
}); 

var InputList = React.createClass({ 
    handleChange: function(e){ 
     console.log(' ', e.target.value); 
     this.setState({value: e.target.value}) 
    }, 
    render:function(){ 
     var boxes = this.props.data.map(function(d){ 
     return(
      <input value={d.num} onChange={this.handleChange}/> 
     ) 
     }.bind(this)); 
     return(
      <div>{boxes}</div> 
    ) 
    } 
}) 

var PRODUCTS = [ 
    {num: 1, name: 'Football'}, 
    {num: 2, name: 'Baseball'}, 
    {num: 3, name: 'Basketball'}, 
    {num: 4, name: 'iPod Touch'}, 
    {num: 5, name: 'iPhone 5'}, 
    {num: 6, name: 'Nexus 7'} 
    ]; 

ReactDOM.render(<Form products={PRODUCTS}/>, 
       document.getElementById('content')) 

在此先感谢您的帮助。

编辑 - UPDATE

var InputList = React.createClass({ 
    componentWillReceiveProps: function(nextProp){ 
     nextProp.data.map(function(props){ 
     console.log('+++++++', props.num); 
     this.setState({ 
      value: props.num 
     }) 
     }.bind(this)) 
    }, 
    handleChange: function(e){ 
     //console.log(' ', e.target.value); 
     this.setState({value: e.target.value}) 
    }, 
    render:function(){ 
     var boxes = this.props.data.map(function(d){ 
     //console.log(d) 
     return(
      <input value={this.state.value} onChange={this.handleChange}/> 
     ) 
     }.bind(this)); 
     return(
      <div>{boxes}</div> 
    ) 
    } 
}) 

Answer 1

你的状态应在一个地方（优选使用一些状态管理系统，像redux）

来管理在下面Form的例子中保持该状态，同时InputList只是呈现输入并在事物发生变化时通知。

然后Form的handleChange方法更新状态。

注有很多方法可以实现这一点，但我试图让我的例子靠近你的代码

class InputList extends React.Component { 
 
    handleChange(index, e) { 
 
    const value = e.target.value 
 
    this.props.onChange(index, {...this.props.data[index], name: value}) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     {this.props.data.map((d,i) => <input key={d.num} value={d.name} onChange={this.handleChange.bind(this, i)} />) } 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Form extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     data: [] 
 
    } 
 
    } 
 
    
 
    loadStuff() { 
 
    console.log('got some stuff from the server') 
 
    this.setState({ 
 
     data: [{num:1, name: 'name1'}, {num:2, name: 'name2'}] 
 
    }) 
 
    } 
 
    
 
    handleChange(index, value) { 
 
    console.log('data changed!', value) 
 
    const data = [...this.state.data] 
 
    data.splice(index, 1, value) 
 
    this.setState({ 
 
     data, 
 
    }) 
 
    } 
 
    
 
    componentDidMount() { 
 
    this.loadStuff() 
 
    } 
 
    render() { 
 
    return <InputList data={this.state.data} onChange={this.handleChange.bind(this)} /> 
 
    
 
    } 
 
} 
 

 
// app.js 
 
ReactDOM.render(
 
    <Form />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>