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

您的州应该在一个地方进行管理（最好使用一些州管理系统，如redux）

在下面的示例中，Form保持状态，而InputList只是呈现输入并在发生变化时通知。

然后Form handleChange方法更新状态。

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

＆＃13;

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')
)

＆＃13;

<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>

＆＃13;

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

1 个答案: