访问React组件的道具

Walid Nawfal Sabihi 发表于 Dev

瓦利德·纳瓦尔·萨比西（Walid Nawfal Sabihi）

好的，所以我想修改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")
);

质量

那是因为您没有将值作为prop传递给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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。