React 입력 텍스트 필드에 입력 할 수 없습니다.

나는 React.js의 첫 번째 비트를 시도하고 있으며 초기에 난처 해합니다 ... 검색 양식을 <div id="search"></div>. 그러나 검색 창에 입력하는 것은 아무것도하지 않습니다.

아마도 소품과 상태를 위아래로 전달하는 것이 누락되고 있으며 이것은 일반적인 문제처럼 보입니다. 그러나 나는 어리둥절합니다. 무엇이 누락되었는지 볼 수 없습니다.

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

(결국 나는 다른 유형을 갖게 될 SearchFacet*것이지만 나는 단지 이것을 작동시키기 위해 노력하고 있습니다.)

onchange.NET에서 소품 케이스를 제대로 처리하지 않았습니다 input. 그것은 할 필요가 onChangeJSX에.

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

value소품을 에 전달한 <input>다음 onChange핸들러를 사용하여 사용자 상호 작용에 대한 응답으로 전달 된 값을 변경하는 주제 는 문서에서 꽤 잘 고려 됩니다 .

이러한 입력을 Controlled Components 라고하며 대신 DOM이 기본적으로 입력 값과 사용자의 후속 변경 사항을 Unmanaged Components 로 처리 할 수 ​​있도록하는 입력을 참조합니다 .

의 valueprop input을 어떤 변수로 설정할 때마다 Controlled Component가 있습니다. 이 방법은 당신이 있어야합니다 일부 프로그램에 의해 변수의 값을 변경하거나 다른 입력이 항상 값을 보유 할 결코 변화, 심지어 입력하면됩니다 - 입력의 기본 동작을 입력에 그 값을 업데이트 할 수있다 오버라이드 (override) 여기 React로.

따라서 상태에서 해당 변수를 올바르게 가져오고 상태를 모두 올바르게 업데이트하는 핸들러가 있습니다. 문제는 처리기가 호출 되지 않았고 입력에 입력 할 때 업데이트 onchange되지 않았기 때문에 정확하지 않았기 때문 입니다. 사용 할 때 핸들러를 한다 라고하는이 되어 입력 할 때 업데이트 및 변경 사항을 참조하십시오.onChangevalueonChangevalue

사용 value={whatever}하면 입력 필드에 입력 할 수 없습니다. 당신은 사용해야합니다 defaultValue="Hello!".

https://facebook.github.io/react/docs/uncontrol-components.html#default-values를 참조 하십시오.

또한,이 onchange해야 onChange점 밖으로 @davnicwil한다.

이는 onChange 함수가 입력에 언급 된 적절한 값을 업데이트하지 않기 때문에 발생할 수 있습니다.

예:

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

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

onChange 함수에서 언급 된 값 필드를 업데이트합니다.

나는 또한 같은 문제가 있고 내 경우에는 감속기를 제대로 주입했지만 여전히 필드에 입력 할 수 없습니다. 그것은 당신이 사용하는 경우 판명 immutable사용해야합니다 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 */

당신의 상태는 다음과 같아야합니다. state->form그렇지 않으면 라이브러리를 명시 적으로 설정해야합니다 form. 또한 state의 이름은이어야합니다 . 이 문제를 참조하십시오

나를 위해 다음과 같은 간단한 변경이 완벽하게 작동했습니다.

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

변경 ... value = {myPropVal} to ... defaultValue = {myPropVal}

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

클래스 구성 요소 컨텍스트에서 ...

changeHandler 메서드가 일반 함수 인 경우 :

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

이렇게 사용할 수 있습니다 ...onChange={(e)=>this.handleChange(e)}

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

changeHandler 메서드가 화살표 함수 인 경우 :

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

이렇게 사용할 수 있습니다 ... onChange={this.handle}

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

그리고 이것은 "React 입력 텍스트 필드에 입력 할 수 없습니다"문제를 해결했습니다.