Javascript 为什么我在第一次单击中得到null，在第二次或之后的任何一次单击中得到正确的输入元素react js？

这是App.js，我将输入元素作为道具传递给子组件，以在子组件中单击按钮时显示元素，但它第一次记录为null，之后它正确记录元素，我想知道浏览器是否在html呈现之前执行document.querySelector（），还是什么

render（）{
返回(
反应应用程序
点击
);
}

这是应该显示输入元素的component.js

const Person=props=>{
常量outHandler=（）=>{
控制台日志（props.inp）；
};
返回(
我是{props.name}我是{props.age}岁，他喜欢{propsState.hoppies}并且说{propsState.languages}变化
);
};

在初始装载时由render方法构造HTML标记时，文档中不存在与组件对应的HTML标记

虽然您可以使用ref：

this.inputRef = React.createRef();

如果您试图获取输入中的值，则应向输入添加更改处理程序，将输入值置于状态，并将其作为道具传递：

const outHandler = () => {
  console.log(props.inputValue);
};

this.setState（{inputValue:e.target.value}）}
>

谢谢你的回答，我想知道为什么会出现这种行为，为什么我第一次得到空值请参见答案的第一句话。在初始装载时由render方法构造HTML标记时，文档中不存在与组件对应的HTML标记。因此，

querySelector

在文档中看不到它，并返回

null

。

console.log(props.inputRef.current)

const outHandler = () => {
  console.log(props.inputValue);
};

<input
  className="inp"
  onChange={e => this.setState({ inputValue: e.target.value })}
></input>