Javascript 访问React组件'；道具

好吧，我正在修补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")
);

“严格使用”；
var InputText=React.createClass({
render（）{
return请输入您希望访问的应用程序名称：

}
});
var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
console.log（this.props.value）；
}
},
render（）{
回来
}
});
var AppForm=React.createClass({
render（）{
回来
}
});
var App=React.createClass({
render（）{
回来
}
});
ReactDOM.render(
,
document.getElementById（“容器”）
);

您没有将任何道具传递到。你会通过这样的道具

此应用中没有传递任何道具（实际上：）

但您真正想要的是输入框中的值。所以，在React中，你会做一个参考。作为一个简单的例子，我有一个全局上下文对象

ctx={}

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

---

Console.log，应该都很好

你没有向我传递任何道具。你会通过这样的道具

此应用中没有传递任何道具（实际上：）

但您真正想要的是输入框中的值。所以，在React中，你会做一个参考。作为一个简单的例子，我有一个全局上下文对象

ctx={}

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

---

Console.log，应该都很好

这是因为您没有将值作为道具传递给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>
    }
});

var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
console.log（'InputBox值：'+e.target.Value）；
}
},
render（）{
回来
}
});

或者将值存储在状态中并从那里获取

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>
    }
});

var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
console.log（'InputBox值：'+this.state.Value）；
}
},
render（）{
返回此.setState（{value:e.target.value}）}>
}
});

---

这是因为您没有将值作为道具传递给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>
    }
});

var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
console.log（'InputBox值：'+e.target.Value）；
}
},
render（）{
回来
}
});

或者将值存储在状态中并从那里获取

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>
    }
});

var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
console.log（'InputBox值：'+this.state.Value）；
}
},
render（）{
返回此.setState（{value:e.target.value}）}>
}
});

---

使用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")
);

“严格使用”；
var InputText=React.createClass({
render（）{
return请输入您希望访问的应用程序名称：

}
});
var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
log（this.refs.textbox.value）；
}
},
render（）{
回来
}
});
var AppForm=React.createClass({
render（）{
回来
}
});
var App=React.createClass({
render（）{
返回

获取值的另一种方法是将事件e用作
e.target.value
。道具不起作用，因为您实际上没有将道具传递给InputBox组件。
使用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")
);

“严格使用”；
var InputText=React.createClass({
render（）{
return请输入您希望访问的应用程序名称：

}
});
var InputBox=React.createClass({
按键（e）{
如果（e.key=='Enter'）{
log（this.refs.textbox.value）；
}
},
render（）{
回来
}
});
var AppForm=React.createClass({
render（）{
回来
}
});
var App=React.createClass({
render（）{
返回

获取值的另一种方法是将事件e用作
e.target.value
。道具不起作用，因为您实际上没有将道具传递给InputBox组件