Mehrere Eingänge mit mehreren Statuswerten in React

Question

Ich bin gerade dabei, Wit React. Ich versuche ein Formular mit mehreren Eingabefeldern zu erstellen. Diese Felder haben einen Standardwert, wenn die Komponente geladen wird. Der Wert ist editierbar.

Ich erstelle die Felder durch Iterieren über die Daten. Ich habe Schwierigkeiten, den Status zu setzen, sobald das Feld bearbeitet wurde. Hier ist, was ich bisher geschafft habe.

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

Vielen Dank im Voraus für jede Hilfe.

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

Ihr Zustand sollte an einem Ort verwaltet werden (vorzugsweise einig Zustand-Management-System, wie redux)

Im Beispiel unten Form den Zustand während InputList hält nur rendert die Eingaben und benachrichtigt, wenn sich etwas ändert.

Dann aktualisiert die FormhandleChange Methode den Status.

Hinweis Es gibt viele Möglichkeiten, dies zu erreichen, aber ich versuchte, mein Beispiel nah an Ihrem Code

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>