2016-04-01 3 views
0

Я видел во многих учебниках по React об управлении входными значениями. Следующая картина:Значение входного сигнала для изменения значения

На Родитель проходящей реквизита к компонентному входу, handleInputText устанавливает состояние для anyValue:

<InputComponent textValue={this.state.anyValue} onInputtingText={this.handleInputText}/> 

на компонентный вход, OnEvent может быть ==> OnChange, ONBLUR ...:

<input type='text' ref='inputRef' value={this.props.textValue} onEvent={this.handleInput}/> 

InputComponent в handleInput:

handleInput(){ 
    this.setState(this.refs.inputRef.value) 
} 

Теперь мои выводы, я стараюсь регистрируйте его, когда родители работают при настройке состояния, и он регистрирует начальную. Это некоторые предварительные выводы:

  1. Всякий раз, когда событие триггера его значение на входе не текущее значение InputComponent. Это значение, установленное для родителя для этого значения.

  2. И значение входа, и this.props.textValue совпадают при втором запуске события.

Мой вопрос: как вы справляетесь с этим способом реагирования? Или вы должны проверить это внутри функции handleInput?

Заранее спасибо.

+0

Да то же самое, я только что узнал, что всякий раз, когда я пытаюсь войти государственное значение, когда установлено, что возвращает Начальное значение. Почему так? Я загрузил отладчик React, и состояние установлено на правильное значение. Благодаря! –

ответ

0

Вы можете установить состояние в this.handleInputText и вызвать его в InputComponent,

var App = React.createClass({ 
    getInitialState() { 
    return { anyValue: '' }; 
    }, 

    handleInputtingText(value) { 
    this.setState({ anyValue: value }); 
    }, 

    render() { 
    return <div> 
     <p>{ this.state.anyValue }</p> 
     <InputComponent 
     textValue={ this.state.anyValue } 
     onInputtingText={ this.handleInputtingText } 
     /> 
    </div> 
    } 
}); 

var InputComponent = React.createClass({ 
    handleInput(e) { 
    this.props.onInputtingText(e.target.value); 
    }, 

    render: function() { 
    return <input 
     type="text" 
     value={this.props.textValue} 
     onChange={ this.handleInput } 
    />; 
    } 
}); 

Example

Смежные вопросы