Доступ к реквизитам компонента React

Question

Хорошо, поэтому я занимаюсь ReactJS и работаю на простых примерах, все отлично работает, и я уже чувствую, что он улучшил мою производительность. Теперь я работаю над простым примером React, который принимает имя приложения и записывает его в консоль при обнаружении нажатия клавиши Enter. Все работает нормально, пока я не введу имя приложения в поле ввода, и я нажимаю клавишу Enter, то, что я вижу тогда в журнале консоли, не является входным значением, а скорее «неопределенным» значением. Вот полный код JS:

"use strict"; 

var InputText = React.createClass({ 
    render() { 
     return <div><p>Please input the app name you wish to access:</p></div> 
    } 
}); 

var InputBox = React.createClass({ 
    onKeyPress(e) { 
     if (e.key === 'Enter') { 
     console.log(this.props.value); 
     } 
    }, 
    render() { 
     return <input type="text" onKeyPress={this.onKeyPress}></input> 
    } 
}); 

var AppForm = React.createClass({ 
    render() { 
     return <div class="appForm"> 
      <InputText /> 
      <InputBox /> 
     </div> 
    } 
}); 

var App = React.createClass({ 
    render() { 
     return <AppForm /> 
    } 
}); 

ReactDOM.render(
    <App />, 
    document.getElementById("container") 
); 

Answer 1

Это потому, что вы не передаете значение в качестве опоры для вашего компонента InputBox.

Вы можете получить значение от события

var InputBox = React.createClass({ 
    onKeyPress(e) { 
     if (e.key === 'Enter') { 
     console.log('InputBox Value: ' + e.target.value); 
     } 
    }, 
    render() { 
     return <input type="text" onKeyPress={this.onKeyPress}></input> 
    } 
}); 

jsfiddle

Или хранить значение в государстве и получить его оттуда.

var InputBox = React.createClass({ 
    onKeyPress(e) { 
     if (e.key === 'Enter') { 
     console.log('InputBox Value: ' + this.state.value); 
     } 
    }, 
    render() { 
     return <input type="text" onKeyPress={this.onKeyPress} onChange={(e) => this.setState({value: e.target.value})}></input> 
    } 
}); 

jsfiddle

Answer 2

Вы не передали никаких реквизитов. Вы бы передать реквизит, как этот

нет реквизита прошли где-нибудь в этом приложении на самом деле :)

Но то, что вы действительно хотите это значение из поля ввода. Поэтому в React вы сделаете ссылку. В качестве быстрого и грязных, например у меня есть глобальный контекст объект ctx={}

<input type="text" className="inputClass" style={inputStyles} ref={(c) => ctx._input = c} /> 

Теперь в моем компоненте я могу сослаться на значение введенного как

ctx._input.value 

console.log, что и это все должно быть хорошо.

Answer 3

Использование исх для доступа к значению поля ввода

"use strict"; 

var InputText = React.createClass({ 
    render() { 
     return <div><p>Please input the app name you wish to access:</p></div> 
    } 
}); 

var InputBox = React.createClass({ 
    onKeyPress(e) { 
     if (e.key === 'Enter') { 
     console.log(this.refs.textbox.value); 
     } 
    }, 
    render() { 
     return <input type="text" onKeyPress={this.onKeyPress} ref = 'textbox'></input> 
    } 
}); 

var AppForm = React.createClass({ 
    render() { 
     return <div class="appForm"> 
      <InputText /> 
      <InputBox /> 
     </div> 
    } 
}); 

var App = React.createClass({ 
    render() { 
     return <AppForm /> 
    } 
}); 

ReactDOM.render(
    <App />, 
    document.getElementById("container") 
); 

JSFIDDLE

Другой способ получить значение будет использовать событие е как e.target.value. Props не работает, потому что вы фактически не передаете реквизиты компоненту InputBox.