제어 된 컴포넌트는 양식의 상태가 변경 될 때마다 컴포넌트의 상태에 기록된다는 것을 의미합니다. 이러한 종류의 컴포넌트를 제어 컴포넌트라고합니다.
일반 구성 요소는 입력 상자의 값을 변경할 수 없으며 입력 구성 요소와 상태를 결합한 다음 onChange 이벤트를 바인딩하고 마지막으로 상태를 사용하여 값을 실시간으로 업데이트하고 입력에 표시하여 제어 된 구성 요소를 형성합니다.
이 예에서 입력 유형의 라디오 버튼은 라디오입니다. 선택한 항목에 따라 다른 속도가 설정되고 지정됩니다. 동시에 라디오 버튼의 선택된 상태가 다른 속도에 따라 실시간으로 업데이트되어 제어 된 구성품
// 기간은 상태입니다.
<label><input type="radio" name="time" value="0.13" onChange={this.handledurationChange} checked={(this.state.duration == "0.13") ? "checked" : ""}/>快</label>
<label><input type="radio" name="time" value="0.55" onChange={this.handledurationChange} checked={(this.state.duration == "0.55") ? "checked" : ""}/>正常</label>
<label><input type="radio" name="time" value="1" onChange={this.handledurationChange} checked={(this.state.duration == "1") ? "checked" : ""}/>慢</label>handledurationChange = (event) =>{
this.setState({
duration: event.target.value
})
//此处打印的结果是上一次的duration，因为react会把传进来的state缓存起来，稍后再更新到state上
//因此，如果要在此处使用duration进行运算的话需要另想办法
console.log("duration2:"+ this.state.duration);
}이러한 방식으로 사용자는 다른 라디오 버튼을 클릭하여 다른 라디오 버튼을 선택할 수 있지만 인쇄 된 기간 결과는 우리가 기대하는 업데이트 된 값이 아니라 마지막 값입니다. React는 들어오는 상태를 캐시하기 때문에이 객체를 업데이트 대기열에 넣은 다음 나중에 대기열에서 새 상태를 추출하여 상태에 병합 한 다음 구성 요소 업데이트를 트리거합니다.
이 시점에서 얻은 값은 최종 지속 시간의 값은 아니지만 테스트 후 다른 방법으로 지속 시간을 사용하면 해당 값이 업데이트되어 정상적으로 사용할 수 있습니다!
또한이 순간 계산을 위해 새 기간 값을 사용하려면 함수를 매개 변수로 수신하는 setstate의 또 다른 사용으로 이어질 수 있습니다.
handledurationChangeTest = (event) =>{
this.setState((prevState) => {
return{duration:0}
})
this.setState((prevState) => {
return{duration: prevState.duration+1}
})
console.log("duration2:"+ this.state.duration);
}테스트 코드는 일반적으로 기간 변경을 표시 할 수 있으며, 이는 함수를 사용하여 매개 변수를 전달하는 방법이 가능함을 나타냅니다!