Không thể nhập vào trường văn bản đầu vào React

Tôi đang thử phần đầu tiên của mình với React.js và đã sớm bị bối rối ... Tôi có đoạn mã dưới đây, hiển thị một biểu mẫu tìm kiếm <div id="search"></div>. Nhưng gõ vào hộp tìm kiếm không làm gì cả.

Có lẽ điều gì đó đang bị thiếu khi chuyển các đạo cụ và trạng thái lên xuống, và đây có vẻ như là một vấn đề phổ biến. Nhưng tôi bối rối - tôi không thể nhìn thấy những gì còn thiếu.

var SearchFacet = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.searchStringInput.value
    )
  },
  render: function() {
    return (
      <div>
        Search for:
        <input
          type="text"
          value={this.props.searchString}
          ref="searchStringInput"
          onchange={this.handleChange} />
      </div>
    );
  }
});

var SearchTool = React.createClass({
  render: function() {
    return (
      <form>
        <SearchFacet 
          searchString={this.props.searchString}
          onUserInput={this.props.onUserInput}
         />
        <button>Search</button>
      </form>
    );
  }
});

var Searcher = React.createClass({
  getInitialState: function() {
    return {
      searchString: ''
    }
  },

  handleUserInput: function(searchString) {
    this.setState({
      searchString: searchString
    })
  },

  render: function() {
    return (
      <div>
        <SearchTool 
          searchString={this.state.searchString}
          onUserInput={this.handleUserInput}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <Searcher />,
  document.getElementById('searcher')
);

(Cuối cùng tôi sẽ có các loại khác SearchFacet*nhưng tôi chỉ đang cố gắng làm cho loại này hoạt động.)

Bạn đã không đặt chỗ dựa của mình đúng cách onchangetrong input. Nó cần phải onChangeở trong JSX.

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>  

Chủ đề về việc chuyển một giá trị valuecho một <input>, và sau đó bằng cách nào đó thay đổi giá trị được truyền để đáp ứng với tương tác của người dùng bằng cách sử dụng một onChangetrình xử lý được xem xét khá tốt trong tài liệu .

Chúng đề cập đến các đầu vào như Thành phần được kiểm soát và tham chiếu đến các đầu vào thay vào đó cho phép DOM xử lý nguyên bản giá trị của đầu vào và các thay đổi tiếp theo từ người dùng dưới dạng Thành phần không được kiểm soát .

Bất cứ khi nào bạn đặt phần valuehỗ trợ của một inputbiến nào đó, bạn có Thành phần được Kiểm soát . Điều này có nghĩa là bạn phải thay đổi giá trị của biến bằng một số phương tiện có lập trình, nếu không đầu vào sẽ luôn giữ giá trị đó và sẽ không bao giờ thay đổi, ngay cả khi bạn nhập - hành vi gốc của đầu vào, để cập nhật giá trị của nó khi nhập, bị ghi đè bằng React tại đây.

Vì vậy, bạn đang lấy biến đó từ trạng thái một cách chính xác và có một trình xử lý để cập nhật trạng thái đã được thiết lập tốt. Vấn đề là do bạn có onchangevà không đúng onChangetrình xử lý đã không bao giờ được gọi và do đó, valuekhông bao giờ được cập nhật khi bạn nhập vào đầu vào. Khi bạn sử dụng onChangetrình xử lý được gọi, trình xử lý value được cập nhật khi bạn nhập và bạn thấy các thay đổi của mình.

Việc sử dụng value={whatever}sẽ khiến bạn không thể nhập vào trường nhập. Bạn nên sử dụng defaultValue="Hello!".

Xem https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

Ngoài ra, onchangephải onChangenhư @davnicwil chỉ ra.

Điều này có thể do hàm onChange không cập nhật giá trị thích hợp được đề cập trong đầu vào.

Thí dụ:

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

 changeText(event){
        this.setState(
            {textValue : event.target.value}
        );
    }

trong chức năng onChange cập nhật trường giá trị được đề cập.

Tôi cũng gặp vấn đề tương tự và trong trường hợp của tôi, tôi đã tiêm bộ giảm tốc đúng cách nhưng vẫn không thể nhập trường. Nó chỉ ra nếu bạn đang sử dụng immutablebạn phải sử dụng redux-form/immutable.

import {reducer as formReducer} from 'redux-form/immutable';
const reducer = combineReducers{

    form: formReducer
}
import {Field, reduxForm} from 'redux-form/immutable';
/* your component */

Lưu ý rằng trạng thái của bạn phải giống như state->formnếu không, bạn phải cấu hình rõ ràng thư viện cũng như tên cho trạng thái phải là form. xem vấn đề này

Đối với tôi, thay đổi đơn giản sau đây hoạt động hoàn hảo

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

thay đổi ... value = {myPropVal} thành ... defaultValue = {myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

Trong ngữ cảnh thành phần lớp ...

Nếu phương thức changeHandler là một hàm bình thường:

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

nó có thể được sử dụng như thế này ...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

Nếu phương thức changeHandler là một hàm mũi tên:

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

nó có thể được sử dụng như thế này ... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

Và điều này đã giải quyết được vấn đề "Không thể nhập trong trường văn bản đầu vào React" của tôi.