在 react 中访问父组件之外的组件的子属性

Question

我在react中有一个主页组件，它的渲染函数看起来像这样

const MainPage = () => {
return (
<>
<Component1 />
<Component2 />
</>
)
}

组件有一些输入

const Component1 = () => {
const [val1, setVal1] = React.useState("");
const [val2, setVal2] = React.useState("");
return (
<>
<input type="text" value={val1} onChange={setVal1} />
<input type="text" value={val2} onChange={setVal2} />
</>
)
}

我的问题是如何在MainPage组件中获得值val1和val2 ?提前感谢

Answer 1

在React项目中使用Redux或Context API。顺便说一句，你可以调用该函数来获取子组件变量的值。

例子反应使用类

class Parent extends Component {
constructor() {
this.state = {
value: ''
};
}
//...
handleChangeValue = e => this.setState({value: e.target.value});
//...
render() {
return (
<Child
value={this.state.value}
onChangeValue={this.handleChangeValue}
/>
);
}
}
class Child extends Component {
//...
render() {
return (
<input
type="text"
value={this.props.value}
onChange={this.props.onChangeValue}
/>
);
}
}

Answer 2

你不能。React基于Unidirectional Data Flow

因此，为了解决这个问题，你必须定义一个将从子进程调用的事件。

const MainPage = () => {
const [val1, setVal1] = React.useState("");
const [val2, setVal2] = React.useState("");
return (
<>
<Component1 val1={val1} onChange1={setVal1} val2={val2} onChange2={setVal2} />
<Component2 />
</>
)
}

和Component1

const Component1 = ({val1, onChange1, val2, onChange2}) => {
return (
<>
<input type="text" value={val1} onChange={onChange1} />
<input type="text" value={val2} onChange={onChange2} />
/>
</>
)
}