의미있는 UI로 입력 텍스트 미리 채우기

Question

의미있는 UI의 Form.Input 또는 Input 구성 요소에 미리 정의 된 값을 어떻게 설정합니까? 나는 defaultValue = "someVal"을 작동하는 소품으로 전달하려고 시도했습니다. 하지만 소품이 바뀌면 값이 업데이트되지 않습니다. 프로퍼티 값 = "someVal"을 전달하려고 시도했지만 그 필드를 편집하기위한 액세스를 차단합니다. 모든 키 입력은 무시됩니다. 기본적으로 수행 할 방법이 있어야합니다

그리고 여전히 componentWillReceiveProps가 트리거 될 때 값을 업데이트합니까? 여기

이것은 제어로 아래의 입력을 사용하는 형태 I은

을 사용하고, 입력 요소 인 https://react.semantic-ui.com/collections/form https://react.semantic-ui.com/elements/input

I 본질적 이하 입력 렌더링 AutoSaveInput.jsx을 각 키 스트로크를 자동으로 저장하는 onChange (여전히 디 바운스 추가 필요).

<Label basic>{this.props.label}</Label> 
<Form.Input 
          defaultValue={this.props.defaultValue} 
          disabled={this.props.disabled} 
          name={this.props.name} 
          onChange={this.onChange} 
          error={this.state.isDirty} 

          /> 

위의 입력 내용은 처음에는 문제가 없습니다. 그러나 새 소품이 들어 오면 this.props.label은 제대로 업데이트되지만 Form.Input 값은 전혀 업데이트되지 않습니다. 대신 여전히 이전 값을 보여줍니다.

또한이 값을 아래로 변경하면 값이 새 소품으로 업데이트되지만 입력 자체는 입력 할 수 없습니다. 커서는 입력의 끝으로 점프하고 다른 것은 입력 할 수 없습니다. var에이 어디

<Label basic>{this.props.label}</Label> 
<Form.Input 
          value={this.props.defaultValue} 
          disabled={this.props.disabled} 
          name={this.props.name} 
          onChange={this.onChange} 
          error={this.state.isDirty} 

          /> 

또한 소품은 클릭을 클릭하여 ReactRouter v4를 통해 업데이트되고 있는지 편집을위한 다양한 형태의 콘텐츠에로드됩니다.

Answer 1

이 작업이 수행되었습니다. Form.Input을 렌더링하고 value = {this.state.value} vs {this.props.value}를 전달한 내 구성 요소의 상태에서 값을 유지해야했습니다.