[javascript] 반응-제어되지 않은 입력 변경

제어 된 입력이 하나 있다고 생각되는 형식의 간단한 반응 구성 요소가 있습니다.

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

내 응용 프로그램을 실행하면 다음 경고가 나타납니다.

경고 : MyForm이 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않은 상태에서 제어 된 상태로 또는 그 반대로 전환해서는 안됩니다. 구성 요소의 수명 동안 제어 또는 제어되지 않은 입력 요소 사용 여부 결정

나는 가치가 있기 때문에 입력이 통제된다고 생각합니다. 내가 뭘 잘못하고 있는지 궁금해?

React 15.1.0을 사용하고 있습니다

답변

this.state = { name: '' };

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

<input ... onChange={ this.myChangeHandler} ... />

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

...

<input name="name" type="text" value={this.state.name || ''}/>

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }