我正在制作一个基本的下拉选择器。当我意识到我正在为父级和子级设置状态时,我几乎让它工作了,所以我再次重构以尝试简化这一切并将大部分责任放在一个地方。
我的逻辑位于 MyDropDown 组件中,然后我有一个 Header 组件,然后是应呈现所有内容的 Main 组件。
import React from 'react';
class MyDropdown extends React.Component {
render() {
let initialUsers = this.props.state.users;
let alphabetizeUsers = initialUsers
.sort((a, b) => {
return a.name > b.name;
})
.map(obj => {
return (
<option key={obj.id} value={obj.name}>
{obj.name}
</option>
);
});
return <select>{alphabetizeUsers}</select>;
}
}
export default MyDropdown;
然后我有我的主要组件,我可以在其中进行 api 调用并将状态传递到下拉组件中。
import React from 'react';
import MyDropdown from './MyDropdown';
class UserHeader extends React.Component {
state = {
users: []
};
componentDidMount() {
let initialUsers = [];
fetch('http://localhost:3000/users')
.then(response => {
return response.json();
})
.then(data => {
this.setState({ users: data });
});
}
render() {
return <MyDropdown state={this.state} />;
}
}
export default UserHeader;
最后是我的主要组件,我想在其中显示所选下拉菜单中的值
import React, { Component } from 'react';
import './Main.css';
import MyDropdown from './components/MyDropdown';
import UserHeader from './components/UserHeader';
class Main extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<span className="App-title">SELECT A USER:</span>
<UserHeader />
</header>
<p className="App-intro">
I should get the dropdown value here: {this.state.user}
</p>
</div>
);
}
}
export default Main;
我尝试做的是移动声明
I should get the dropdown value here: {this.state.policies} .
进入 UserHeader 组件。如何将子级中选择的值返回到其父级?
我尝试过的另一件事是向子组件添加处理程序
onChange = e => {
this.setState({ selectedUser: e.target.value });
};
并将其添加到选择中...但再次不确定如何将此值传递给父级。
return <select onChange={this.onChange}>{alphabetizeUsers}</select>;
最佳答案
将值传递回父组件的最简单方法是通过回调。
尝试定义并传入 onChange={this.onChange}
到您的主要组件,这样您的主要组件就变成:
import React, { Component } from 'react';
import './Main.css';
import MyDropdown from './components/MyDropdown';
import UserHeader from './components/UserHeader';
class Main extends Component {
this.state = {
user: null,
}
constructor(props) {
super(props);
this.onChangeUser = this.onChangeUser.bind(this);
}
onChangeUser(newUser) {
this.setState({ user: newUser });
}
render() {
return (
<div className="App">
<header className="App-header">
<span className="App-title">SELECT A USER:</span>
<UserHeader onChangeUser={this.onChangeUser} />
</header>
<p className="App-intro">
I should get the dropdown value here: {this.state.user}
</p>
</div>
);
}
}
export default Main;
现在您正在传递回调,您可以对 UserHeader
执行相同的操作组件。
import React from 'react';
import MyDropdown from './MyDropdown';
class UserHeader extends React.Component {
state = {
users: []
};
componentDidMount() {
let initialUsers = [];
fetch('http://localhost:3000/users')
.then(response => {
return response.json();
})
.then(data => {
this.setState({ users: data });
});
}
render() {
return <MyDropdown state={this.state} onChange={this.props.onChangeUser} />;
}
}
export default UserHeader;
最后,您现在可以将此回调附加到您的 <select>
元素。
import React from 'react';
class MyDropdown extends React.Component {
render() {
let initialUsers = this.props.state.users;
let alphabetizeUsers = initialUsers
.sort((a, b) => {
return a.name > b.name;
})
.map(obj => {
return (
<option key={obj.id} value={obj.name}>
{obj.name}
</option>
);
});
return <select onChange={(ev) => this.props.onChange(ev.target.value)}>{alphabetizeUsers}</select>;
}
}
export default MyDropdown;
通过在 select
上定义 onChange像这样的元素,onChange={(ev) => this.props.onChange(ev.target.value)}
,您可以将值返回到主组件并在您的状态中使用它。
关于javascript - React - 在下拉选择中将状态从子级传递到父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49846679/