Несколько входов с несколькими значениями состояния в 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'))

РЕДАКТИРОВАТЬ - ОБНОВИТЬ

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

Ваше состояние должно управляться в одном месте (предпочтительно с использованием некоторой системы управления состоянием, например, приставки)

В приведенном ниже примере Form держит государство в то время как InputList просто делает входные данные и уведомляет, когда что-то меняется.

затем Form "s 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>