Question

我正在使用重要的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);

谢谢

Answer 1

在onChange事件中，您可以通过以下方式将值从SearchForUsers组件传递给其父组件：

onChange={evt => {
        const value = evt.target.value;
        this.setState({
          value,
          menuOpen: value.length > 0
        });
        this.props.emailUser(value);
      }}

反应将数据从子组件传递到父组件

1 个答案: