React의 텍스트 입력을 반복합니다.

Question

사용자가 여러 텍스트 필드를 지정한 다음이 양의 필드를 동적으로 렌더링 할 수있는 앱을 만들고 있습니다. 상태를 설정하여 각 필드에 대해 고유하도록하는 데 문제가 있습니다. 다음 코드 세그먼트는 다음과 같습니다 현재

 var fieldsArray = []; 

     for(var i = 0; i <= this.props.numToShow; i ++){ 
     fieldsArray.push(
      <div> 
       <label> 
        <div className="label">{i}</div> 
        <input type='text' value={this.state.value} name={this.state.value} onChange={this.handleChange} /> 
       </label> 
      </div> 
      ); 
     } 

    return (
     <div className = 'inputs'> 
     {fieldsArray} 
     </div> 
    ); 

, 내가 필드 중 하나는, 다른 모든 필드는 그 고유의 필드 상태로 업데이트 변경할 때.

handleChange: function(e){ 
     this.setState({ 
      value: e.target.value, 
     }); 
    } 

이 배열로 상태를 초기화하는 방법은 입력의 트랙을 유지할 수있다 : 여기 상태를 설정 handleChange 기능은 무엇입니까? 아니면 이것을 할 수있는 더 좋은 방법이 있습니까?

Answer 1

상태 배열을 유지하면 정상적으로 작동합니다. 업데이트 할 항목을 알 수 있도록 입력 색인을 전달하는지 확인해야합니다. bind은 다음과 관련이 있습니다.

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { values: [] }; 
    } 

    handleChange(i, e) { 
    this.setState({ 
     values: { ...this.state.values, [i]: e.target.value } 
    }); 
    } 

    render() { 
    var fieldsArray = []; 

    for (var i = 0; i <= this.props.numToShow; i++) { 
     fieldsArray.push(
     <div> 
      <label> 
       <div className="label">{i}</div> 
       <input 
        type='text' 
        value={this.state.values[i]} 
        name={this.state.values[i]} 
        onChange={this.handleChange.bind(this, i)} /> 
      </label> 
     </div> 
    ); 
    } 

    return (
     <div className = 'inputs'> 
     {fieldsArray} 
     </div> 
    ); 
    } 
}