reactjs - 反应将数据从子组件传递到父组件
问题描述
我正在使用材质 UI 自动建议组件,我想将全名传递给父组件。此链接类似于我的代码https://codesandbox.io/s/ryn76v485m
父组件正在传递 emailUser 道具
<SearchForUsers emailUser={this.emailUsers}/>
emailUsers = (user) => {
debugger
console.log(user + "trying to pass down from child")
}
我遇到的问题是我无法让子组件将状态正确地传递给父组件。
目前,我在员工映射后执行 this.props.emailUser(this.state.values) 。状态只有在第二个人进入后才会改变。我尝试将 this.props.emailUser 放入 onChange 中,但是当用户单击建议的名称时,该事件不会更新状态。谁能告诉我如何正确地将状态返回到父组件。
这是我的子组件。
class ShareForUsers extends Component {
constructor(props){
super(props);
this.state = {
menuOpen: false,
value: "",
values: []
};
}
componentDidMount() {
if (!!this.props.employees && this.props.employees.length == 0) {
this.props.listEmployees();
}
}
componentWillReceiveProps(nextProps) {
this.setState({ ...nextProps })
}
render() {
return (
<div>
<TextField
fullWidth
value={this.state.value}
InputProps={{
startAdornment: this.state.values
.concat()
.sort(({ label: aLabel }, { label: bLabel }) => {
if (aLabel < bLabel) return -1;
else if (aLabel > bLabel) return 1;
return 0;
})
.map(chip => (
<InputAdornment
component={Chip}
label={chip}
onDelete={() => {
const value = chip;
this.setState(({ values: prevValues }) => {
const values = prevValues;
const idx = values.indexOf(value);
if (idx === -1) {
values.push(value);
} else {
values.splice(idx, 1);
}
return {
values
};
});
}}
/>
))
}}
onChange={evt => {
const value = evt.target.value;
this.setState({
value,
menuOpen: value.length > 0
});
}}
onFocus={() =>
this.setState(({ value }) => ({
menuOpen: value.length > 0
}))
}
onBlur={() => this.setState({})}
/>
<div>
{this.state.menuOpen ? (
<Paper
style={{
position: "absolute",
zIndex: 100,
width: "100%"
}}
>
{this.props.employees
.filter(
employee =>
employee.user.email.toLowerCase().indexOf(this.state.value) > -1
)
.map(employee => (
<MenuItem
key={employee.user.id}
onClick={() => {
this.setState(({ values: prevValues }) => {
const values = prevValues.concat();
const idx = values.indexOf(employee.user.id);
if (idx === -1) {
values.push(employee.user.email);
} else {
values.splice(idx, 1);
}
return {
values,
value: "",
menuOpen: false
};
});
}}
>
{employee.user.email}
</MenuItem>
))}
</Paper>
) : (
""
)}
</div>
</div>
)
}
}
const shareForUsers = withStyles(styles)(ShareForUsers)
export default connect(
state => state.user,
dispatch => bindActionCreators(actionCreators, dispatch)
)(shareForUsers);
谢谢
解决方案
在 onChange 事件中,您可以通过以下方式将 SearchForUsers 组件的值传递给其父组件:
onChange={evt => {
const value = evt.target.value;
this.setState({
value,
menuOpen: value.length > 0
});
this.props.emailUser(value);
}}
推荐阅读
- java - 如何在 Java 中使用自定义字符集将字节数组编码为 Base 63 字符串?
- docker - 从交互式 docker 容器在主机上运行命令
- html - 当标签的 href 是一个 html 文件并添加了下载属性时,期望是什么?
- powershell - 使用 PowerShell Where-Object 不适用于 Get-ChildItem
- python - 无法将符号张量 ({}) 转换为 numpy 数组。”
- javascript - 如何根据状态值动态显示组件
- laravel - Laravel:无法使用自动加载功能
- android - 底部导航视图图标更改不起作用
- sql - 如何在 PostgreSQL 中将两个带有动态表名的 SQL 查询合并为一个
- php - 加密模式需要一个大小为 16 的初始化向量