gpt4 book ai didi

javascript - 访问 React 组件的 props

转载 作者:行者123 更新时间:2023-11-30 08:31:03 25 4
gpt4 key购买 nike

好吧,我正在修补 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

关于javascript - 访问 React 组件的 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37973696/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com