Reaktif giriş metni alanına yazamazsınız

Question

İlk bit React.js denemeye başladım ve erken saatlerde çalışıyorum ... Aşağıdaki kodu kullanıyorum, bu da arama formunu <div id="search"></div> içine giriyor. Ancak arama kutusuna yazmanız hiçbir şey yapmaz.

Muhtemelen sahneleri geçip, yukarı ve aşağı doğru kaybolan bir şey oluyor ve bu ortak bir sorun gibi görünüyor. Ama çok şaşırdım - Eksik olanı göremiyorum.

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') 
); 

(Sonunda SearchFacet* diğer türdeki olacak ama sadece çalışan bu almak için çalışıyorum.) O yüzden giriş alanına yazamaz yapacak value={whatever} kullanma

Answer 1

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

You düzgün onchange özelliği kasalı değil. onChange olması gerekiyor - bunu deneyin ve şimdi işleyiciyi çağırıp çağıramayacağını görün. Bu soruya beri

Güncelleme, görüşlerin bir yeri vardır ve ekstra bağlamda biraz sağlayan değerlidir:

bir <input> bir value pervane geçen konu ve sonra bir şekilde geçti değerini değiştirerek onChange işleyicisini kullanarak kullanıcı etkileşimine yanıt olarak the official docs numaralı telefondan oldukça iyi düşünülmüş.

Bunlar Controlled Components gibi girdilerin bakınız, ve bunun yerine, DOM doğal olarak girişin değeri ve Uncontrolled Components olarak kullanıcıdan daha sonra değişiklikleri ele izin girişlerine bakın.

Answer 2

. kullanmalısınız.

@davnicwil işaret olarak da, onchangeonChange olmalıdır

https://facebook.github.io/react/docs/uncontrolled-components.html#default-values bakınız.

Answer 3

Bu, onChange işlevinin, girdide belirtilen uygun değeri güncelleştirmediğinden kaynaklanabilir.

Örnek: değiştiğinde fonksiyonunda

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

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

Verilen değer alanı güncelleştirmek.

Answer 4

Ayrıca, aynı sorun var ve benim durumumda, redüktörü doğru şekilde enjekte ettim ama yine de alana yazı yazamadım. immutable kullanıyorsanız, redux-form/immutable'u kullanmanız gerekir. senin devlet state->form gibi olmalıdır

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

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

Bildirim aksi açıkça da devlet için adı form olmalıdır kütüphane yapılandırma için var. bu bkz. Bu issue