반응 - 소품을 전달하여 입력 defaultValue 변경

반응 - 소품을 전달하여 입력 defaultValue 변경

다음 예를 들어 보십시오.

var Field = React.createClass({
    render: function () {
        // never renders new value...
        return (
            <div>
                <input type="text" defaultValue={this.props.value || ''} />
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {value: 'Hello!'};
    },

    changeTo: function (str) {
        this.setState({value: str});
    },

    render: function () {
        return (
            <div>
                <Field value={this.state.value} />
                <button onClick={this.changeTo.bind(null, 'Whyyyy?')}>Change to "Whyyyy?"</button>
                <button onClick={this.changeTo.bind(null, void 0)}>Change to undefined</button>
            </div>
        );
    }
});

React.render(
    <App />,
    document.getElementById('app')
);

가치를 전달하고 싶다.defaultValue벙어리 입력 구성 요소의 받침대로서.그러나 그것은 결코 그것을 다시 렌더링하지 않는다.

앞서 언급한 바와 같이,defaultValue폼의 초기 부하에서만 설정된다.그 이후에는 "자연스럽게" 업데이트되지 않을 것이다. 왜냐하면 그 목적은 초기 디폴트 값을 설정하는 것이었기 때문이다.

만약 당신이 필요하다면, 당신은 이 문제를 해결할 수 있다.key포장지 구성요소로 이동(예:Field또는App구성 요소, 보다 실제적인 환경에서는, 아마도form구성 요소A goodkey예를 들어, 데이터베이스에 저장된 ID와 같이 양식에 전달되는 리소스의 고유한 값이 될 수 있다.

간단한 경우 필드 렌더에서 다음을 수행하십시오.

<div key={this.props.value}>
    <input type="text" defaultValue={this.props.value || ''} />
</div>

좀 더 복잡한 폼의 경우, 예를 들어 API에 제출되었지만 동일한 페이지에 있는 온미팅 작업과 같은 작업을 원하는 대로 사용할 수 있다.

const Form = ({item, onSubmit}) => {
  return (
    <form onSubmit={onSubmit} key={item.id}>
      <label>
        First Name
        <input type="text" name="firstName" defaultValue={item.firstName} />
      </label>
      <label>
        Last Name
        <input type="text" name="lastName" defaultValue={item.lastName} />
      </label>
      <button>Submit!</button>
    </form>
  )
}

Form.defaultProps = {
  item: {}
}

Form.propTypes = {
  item: PropTypes.object,
  onSubmit: PropTypes.func.isRequired
}

제어되지 않은 양식 입력을 사용할 때는 일반적으로 값이 제출될 때까지 상관하지 않기 때문에 defaultValues(제출 후 개별 입력을 변경할 때마다 변경되는 것이 아니라)를 정말로 업데이트하고자 할 때만 강제로 재렌더하는 것이 더 이상적이다.

또한 동일한 양식을 편집하고 API 응답에 다른 값이 표시될 수 있다는 두려움이 있는 경우 id + 타임스탬프 등의 조합된 키를 제공할 수 있다.

defaultValue는 초기 부하에 대해서만 작동한다.그 이후에는 업데이트가 안 될 겁니다.Field 구성 요소의 상태를 유지 관리하십시오.

var Field = React.createClass({
    //transfer props to state on load
    getInitialState: function () {
        return {value: this.props.value};
    },
    //if the parent component updates the prop, force re-render
    componentWillReceiveProps: function(nextProps) {
         this.setState({value: nextProps.value});
    },
    //re-render when input changes
    _handleChange: function (e){
        this.setState({value: e.target.value});
    },
    render: function () {
        // render based on state
        return (
            <div>
                <input type="text" onChange={this._handleChange} 
                                   value={this.state.value || ''} />
            </div>
        );
    }
});

이건 통제된 것과 관련이 있다고 확신해 통제되지 않는 입력.

내가 제대로 이해한다면, 네가 한 일 때문에.<input>제어되지 않음(정의되지 않음)value속성), 그러면 값은 항상 초기화된 값으로 결정된다.이 경우Hello!.

이 문제를 극복하기 위해 a를 추가할 수 있다.value를 속성으로 하여 설정하다onChange:

var Field = React.createClass({
      render: function () {
          // never renders new value...
          return (
              <div>
                  <input type="text" defaultValue={this.props.default || ''} value={this.props.value} />
              </div>
          );
      }
  });

여기 변화를 보여주는 플런커가 있다.

당신은 조건부로 그리고 당신이 강제로 업데이트하기를 원할 때마다 입력을 할 수 있다.defaultValue입력을 마운트 해제한 다음 즉시 다시 렌더링하십시오.

이 문제는 다음과 같다.

onClick={this.changeTo.bind(null, 'Whyyyy?')}

나는 네가 왜 null에 속박하는지 궁금하다.

'이것'에 바인딩하여 ChangeTo가 이 객체에 State를 설정하십시오.

이것을 사용해 보십시오.

<button onClick={this.changeTo.bind(this, 'Whyyyy?')}>Change to "Whyyyy?"</button>
<button onClick={this.changeTo.bind(this, void 0)}>Change to undefined</button>

Javascript에서는 함수를 호출할 때, 함수를 작성한 곳이 아니라 호출된 범위(알고 있어, 직관적으로 반대되는 것 같다)에서 호출된다.당신이 쓰는 컨텍스트에서 호출되도록 하려면 '.bind(이것)'가 필요하다.

바인딩 및 기능 범위에 대해 자세히 알아보려면 온라인 tute가 많이 있으며(다른 제품보다 훨씬 나은 제품도 있음) - 이 제품이 마음에 들 것이다: http://ryanmorr.com/understanding-scope-and-context-in-javascript/

또한 Firefox나 크롬을 사용하는 경우 Resact Dev 도구를 사용할 것을 권장한다. 이렇게 하면 state.properties가 변경되지 않았음을 알 수 있을 것이다. https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html

조건부 렌더링을 사용하면 구성 요소가 올바른 초기 값을 로드한다.이 모듈에서와 유사한 기능:

class MenuHeaderInput extends React.Component{
    constructor(props){
        super(props);
        this.handleBlur = this.handleBlur.bind (this);
    }
    handleBlur (e) {
        this.props.menuHeaderUpdate(e.target.value);
    }
    render(){
        if (this.props.menuHeader) {
            return (
                <div className="w3-row w3-margin" onClick = {() => this.props.handleTitleClick (10)}>
                    <div className="w3-third" ><pre></pre></div>
                    <input
                        className = {"w3-third w3-input w3-jumbo " + EDIT_COLOR}                
                        type = "text"
                        defaultValue = {this.props.menuHeader}
                        onBlur = {this.handleBlur}
                    />
                    <div className="w3-third" ><pre></pre></div>                
                </div>
            )
        }
        else {
            return null;
        }
    }
}

위의 Sia의 훌륭한 대답과 관련: https://stackoverflow.com/a/41962233/4142459.

나의 경우 양식을 업데이트할 수 있는 몇 가지 방법이 있었다.

1. 사용자가 양식 필드에 값을 입력할 수 있음
2. 사용자가 이전 버전에서 복원할 수 있는 API 요청
3. 사용자는 작성된 양식을 탐색할 수 있음(URL의 queryParams 사용)
4. 양식 필드 지우기
5. 사용자 작업 또는 웹세트에서 모든 필드 또는 단일 변경사항 발생을 허용하는 더 많은 방법.

형식 상태가 입력에 반영되도록 하는 가장 쉬운 방법은 실제로 다음과 같은 것임을 알게 되었다.

1. 수동 제어 기능을 제공하려면 다음과 같이 하십시오.key폼의 상단 레벨의 받침대 또는 폼의 상위 요소(DOM 트리의 입력 위에 있는 한).
2. 사용자가 a를 입력할 때key업데이트가 필요하지 않다.
3. 내가 만들었어key소박하다formHistoricalVersion그리고 양식 필드의 값과 상호 작용하는 사용자 입력/선택/기타에 대한 외부 업데이트가 발생함에 따라 나는 형식HistoricalVersion을 증가시켰다.
4. 이를 통해 사용자 작업에 의한 것인지 API 요청에 의한 것인지 양식의 상태가 동기화되어 있는지 확인할 수 있었다. 나는 그것을 완전히 통제할 수 있었다.

시도한 기타 솔루션:

1. API 요청을 하는 동안 전체 양식을 삭제하십시오(양식이 아닌 로딩 스피너로 로드할 때).성능 및 명확한 형태에 대한 단점들 그것은 약간 미친 짓이었지만, 로는 가능하다.setImmediate을 때로 변환한 을(乙)을 한다.isLoading로 돌아가다.false현지에
2. 추ga a key각 입력에 대해: 이것은 놀라울 정도로 작동했지만, 사용자들이 타이핑할 때마다 이상한 블립이 있어서 나는 그것을 제거해야만 했다.
3. 것의 정적((((((((((((((.field.id) (위 답변에서 제시된 바와 같이) 내가 가지고 있는 모든 사용 사례는 다루지 않았다.

결론적으로, 양식의 키를 react/remensx로 설정하는 것은 꽤 쉽게 효과가 있었다. 나는 단지 다음과 동등한 것을 추가하겠다.

return {
  ...state,
  formFieldState: payload.formFields,
  historicalFormVersion: state.historicalFormVersion + 1
}

이는 일부 타사 라이브러리와 소프로 값을 입력했지만 defaultValue로 사용된 나만의 숫자 입력을 사용하고 있었기 때문에 필요했다.

const NumberDisplay: FunctionComponent = ({ value, setValue }) => (
  <input
    defaultValue={convertToSpecialNumberDisplay(value)}
    onBlur={(e) => convertToSpecialNumberDisplay(e.target.value)}
    onFocus={(e) => convertToNumberFromDisplay(e.target.value)}
    onChange={(e) => setValue(e.target.value)}
  />
)

전체 형태의 대략적인 환원:

const FullForm: FunctionComponent = () => {
  const dispatch = useDispatch();
  const formState = useState((state) => state.formState);
  const formHistoricalVersion = useState((state) => state.formHistoricalVersion);

  return (
  <form key={formHistoricalVersion}>
    {renderFormFields(formState, dispatch)}
  </form>
  )
}

나도 이 문제에 직면해 있는데, 소품이 바뀌었을 때 입력값을 수동으로 업데이트한 것이었어.이 항목을 필드 대응 클래스에 추가:

componentWillReceiveProps(nextProps){
    if(nextProps.value != this.props.value) {
        document.getElementById(<element_id>).value = nextProps.value
    }
}

요소에 ID 속성을 추가하기만 하면 찾을 수 있다.

참조URL: https://stackoverflow.com/questions/30727837/react-change-input-defaultvalue-by-passing-props