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

Question

Tôi đang thử bit React.js đầu tiên của mình và được sắp xếp sớm vào ... Tôi có mã bên dưới, biểu mẫu tìm kiếm này sẽ được chuyển thành <div id="search"></div>. Nhưng nhập vào hộp tìm kiếm sẽ không làm gì cả.

Có lẽ có điều gì đó đang thiếu đi qua các đạo cụ và trạng thái lên xuống, và điều này có vẻ như là một vấn đề phổ biến. Nhưng tôi đang bối rối - tôi không thể 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 SearchFacet* nhưng Tôi chỉ cố gắng để có được một này làm việc.)

Answer 1

Trong

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

Bạn chưa cased đúng tài sản onchange của bạn. Nó cần phải là onChange - hãy thử điều đó và xem liệu nó có gọi trình xử lý hay không.

Cập nhật, kể từ khi câu hỏi này có rất nhiều quan điểm và cung cấp một chút về bối cảnh thêm là có giá trị:

Chủ đề của đi qua một prop value một <input>, và sau đó bằng cách nào đó thay đổi giá trị thông qua để phản hồi tương tác của người dùng bằng cách sử dụng trình xử lý onChange được xem là khá tốt trong the official docs.

Chúng tham chiếu đến các đầu vào như Controlled Components và tham chiếu đến các yếu tố đầu vào thay vì 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 là Uncontrolled Components.

Answer 2

Sử dụng value={whatever} sẽ làm cho nó nên bạn không thể gõ trong lĩnh vực đầu vào. Bạn nên sử dụng defaultValue="Hello!".

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

Ngoài ra, onchange nên onChange như @davnicwil chỉ ra.

Answer 3

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

Ví dụ:

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

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

trong hàm onChange cập nhật các trường giá trị đề cập.

Answer 4

Tôi cũng có cùng một vấn đề và trong trường hợp của tôi tôi tiêm giảm tốc đúng cách nhưng tôi vẫn không thể nhập vào trường. Hóa ra nếu bạn đang sử dụng immutable bạ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 */ 

Chú ý rằng trạng thái của bạn nên được như state->form nếu không bạn phải cấu hình một cách rõ ràng thư viện cũng là tên cho nhà nước nên form. xem điều này issue