React giriş metin alanına yazılamıyor

İlk React.js parçamı deniyorum ve erkenden şaşkına döndüm ... Aşağıdaki koda sahibim, bu da içinde bir arama formu oluşturuyor <div id="search"></div>. Ancak arama kutusuna yazmak hiçbir şey yapmaz.

Muhtemelen sahne ve durumları yukarı ve aşağı geçerken bir şeyler eksik oluyor ve bu yaygın bir sorun gibi görünüyor. Ama şaşkını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 başka türlere sahip SearchFacet*olacağım ama sadece bunu çalıştırmaya çalışıyorum.)

Sen düzgün kasalı değil onchangede pervane input. onChangeJSX biçiminde olması gerekir.

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

Bir valuepervaneyi an'a geçirme <input>ve ardından bir onChangeişleyici kullanarak kullanıcı etkileşimine yanıt olarak iletilen değeri bir şekilde değiştirme konusu , belgelerde oldukça iyi ele alınmıştır .

Kontrollü Bileşenler olarak bu tür girdilere atıfta bulunurlar ve bunun yerine DOM'un, girdinin değerini ve kullanıcıdan sonraki değişiklikleri Kontrolsüz Bileşenler olarak yerel olarak işlemesine izin veren girdilere atıfta bulunurlar .

Bir değişkenin valuepropunu bir inputdeğişkene ayarladığınızda, Kontrollü Bileşeniniz olur . Bu , değişkenin değerini bazı programatik yollarla değiştirmeniz gerektiği anlamına gelir, aksi takdirde girdi bu değeri her zaman tutacaktır ve siz yazsanız bile asla değişmeyecektir - yazarken değerini güncellemek için girdinin yerel davranışı geçersiz kılınır React burada.

Yani, bu değişkeni durumdan doğru bir şekilde alıyorsunuz ve tüm iyi ayarlanmış durumu güncellemek için bir işleyiciniz var. Sorun, işleyiciye sahip onchangeolup olmadığınız ve onChangeişleyicinin asla çağrılmaması ve bu nedenle valuegirdiyi yazdığınızda hiçbir zaman güncellenmemesiydi. Kullanmak yaptığınızda onChangeişleyicisi olan denilen value edilir yazarken güncellenen ve değişiklikleri görmek.

Kullanmak value={whatever}onu giriş alanına yazamayacağınız şekilde yapacaktır. Kullanmalısınız defaultValue="Hello!".

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

Ayrıca, @davnicwil'in onchangebelirttiği onChangegibi olmalıdır .

Bunun nedeni, onChange işlevinin girdide belirtilen doğru değeri güncellemiyor olması olabilir.

Misal:

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

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

onChange işlevinde belirtilen değer alanını güncelleyin.

Benim de aynı problemim var ve benim durumumda redüktörü düzgün enjekte ettim ama yine de sahada yazamadım. Bu kullanıyorsanız çıkıyor immutablekullanmak zorunda 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 */

Durumunuzun state->formaksi halde olduğu gibi olması gerektiğine dikkat edin , kütüphaneyi açıkça yapılandırmanız gerekir, aynı zamanda state için de olmalıdır form. bu sorunu gör

Benim için aşağıdaki basit değişiklik mükemmel çalıştı

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

Değiştir ... değer = {myPropVal}, ... defaultValue = {myPropVal}

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

Sınıf bileşeni bağlamında ...

ChangeHandler yöntemi normal bir işlevse:

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

bunun gibi kullanılabilir ...onChange={(e)=>this.handleChange(e)}

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

ChangeHandler yöntemi bir ok işleviyse:

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

bu şekilde kullanılabilir ... onChange={this.handle}

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

Ve bu benim "React giriş metin alanına yazamıyorum" sorunumu çözdü.