Một thành phần đang thay đổi đầu vào không kiểm soát được của văn bản loại được kiểm soát lỗi trong ReactJS

Question

Một thành phần đang thay đổi đầu vào không kiểm soát được của văn bản loại sẽ được kiểm soát. Các yếu tố đầu vào không nên chuyển từ không kiểm soát sang được kiểm soát (hoặc ngược lại). Quyết định giữa việc sử dụng phần tử đầu vào được kiểm soát hoặc không được kiểm soát trong suốt thời gian tồn tại của thành phần.

Mã của tôi:

constructor(props) { 
super(props); 
this.state = { 
fields: {}, 
errors: {} 
} 
this.onSubmit = this.onSubmit.bind(this); 
    } 
    ... 

    onChange(field, e){ 
     let fields = this.state.fields; 
     fields[field] = e.target.value; 
     this.setState({fields}); 
     } 
    ... 
    <div className="form-group"> 
         <input 
          value={this.state.fields["name"]} 
          onChange={this.onChange.bind(this, "name")} 
          className="form-control" 
          type="text" 
          refs="name" 
          placeholder="Name *" 
         /> 
         <span style={{color: "red"}}>{this.state.errors["name"]}</span> 
         </div> 

Answer 1

Lý do là, trong tình trạng bạn đã định nghĩa:

this.state = { fields: {} } 

đối tượng

lĩnh vực như trống nên trong suốt đầu tiên render this.state.fields.name sẽ undefined, và lĩnh vực đầu vào sẽ nhận được giá trị như:

value={undefined} 

Do trường nhập đó sẽ trở thành ncontrolled.

Khi bạn nhập bất kỳ giá trị trong đầu vào, fields trong trạng thái có được thay đổi để:

this.state = { fields: {name: 'xyz'} } 

Và tại đó lĩnh vực đầu vào thời gian được chuyển đổi thành phần kiểm soát, đó là lý do tại sao bạn đang nhận được lỗi:

A component is changing an uncontrolled input of type text to be controlled.

Giải pháp có thể:

1- Xác định fields trong nhà nước như:

this.state = { fields: {name: ''} } 

2- Hoặc xác định là tài sản giá trị bằng cách sử dụng Short-circuit evaluation như thế này:

value={this.state.fields.name || ''} // (undefined || '') = ''