동적으로 TextField를 만듭니다. 값이 업데이트되지 않습니다.

Question

저는 ajax 호출에서 얻은 배열을 기반으로 textfield (material ui reactjs)를 동적으로 생성해야합니다.

handleChange = (event, something) => { 
      var rNum = event.target.id; 
      this.setState(prevState => ({ 
       // R2_1:"adsf", 
       testing: "cccc" 
       // [rNum]: event.target.value, 
      })); 
     }; 
     componentDidMount() { 
       this.props.question.responses.map((response) => { 
        var responseElem = <TextField id='testing' label="Please enter text" 
         value={this.state.testing} 
         onChange={(event) => { this.handleChange(event) }} 
        />; 
        this.setState(prevState => ({ 
         responseElems: [...prevState.responses, responseElem] 
        })); 
       }); 
      } 
     render() { 
      return (
       <div className="TextBoxType"> 
        <p dangerouslySetInnerHTML={{ __html: this.props.question.text }} /> 
        {this.state.responseElems} 
       </div> 
      ); 
     } 

내가 텍스트 필드의 값을 chagne 때, 그것은 handlechange 이벤트를 트리거 및 상태 값을 업데이트 아래

는 코드입니다. 그러나 이미 state.testing에 바인딩되어 있지만 textField의 실제 값은 변경되지 않습니다. 누군가 조언 해 줄 수 있습니까? 감사.

Answer 1

original documentation을 확인하십시오. 배열 처리에 대해서는 설명하지 않지만 사소한 수정으로 귀하의 경우에 효과가 있다고 생각합니다.

내가 당신의 OnChange 이벤트가 더 코드 최적화 (어느 문서를 사용하는 것이 도달) 될 수있다시피