访问 React 组件的 props答案

【问题标题】：Accessing React component's props访问 React 组件的 props
【发布时间】：2016-06-23 00:47:04
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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

【讨论】：

【解决方案2】：

您没有将任何道具传递到 .你会像这样传递道具

实际上在这个应用程序的任何地方都没有传递任何道具 :)

但你真正想要的是输入框中的值。所以在 React 中你会做一个参考。作为一个快速而肮脏的例子，我有一个全局上下文对象ctx={}

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

现在在我的组件中，我可以引用键入为的值

ctx._input.value

Console.log 那应该没问题。

【讨论】：

【解决方案3】：

使用ref获取输入框的值

"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 用作e.target.value。道具不起作用，因为您实际上并没有将道具传递给 InputBox 组件。

【讨论】：