Question

我正在尝试更改我父母的一个值。我的父容器将数据发送到PersonalComponent，而PersonalComponent将数据发送到我的AvatarComponent我输入的内容是什么

我知道我的PersonalComponent中收到了道具，但是当我将数据发送到AvatarComponent时，我想我可以更改作为PersonalComponent父级的容器的数据

这是所有人的父母：

class HandlePersonal extends Component {
  state = {
    ...this.props.user
  };

  handleUsername = e => {
    e.preventDefault();

    this.props.dispatch({
      type: "CHANGE_USERNAME",
      payload: this.state.displayName
    });
  };

  handleChange = e => {
    this.setState({ ...this.state, [e.target.name]: e.target.value });
    alert(2);
  };

  render() {
    return (
      <PersonalComponent
        handleUsername={this.handleUsername}
        handleChange={this.handleChange}
        data={this.state}
      />
    );
  }
}

这是我的PersonalComponent

const PersonalComponent = props => {
  return (
    <div id="personal">
      <h2>My profile</h2>
      <Card>
        <div id="personal-container">
          <div id="cover">
            <CoverComponent />
          </div>
          <div id="avatar">
            <AvatarComponent
              data={props.data.photoURL}
              onChange={props.handleChange}
            />
          </div>
          <div id="user-name">
            <form onSubmit={props.handleUsername}>
              <InputText
                name="displayName"
                value={props.data.displayName}
                onChange={props.handleChange}
              />
              <Button id="save-username" label="Ok" />
            </form>
          </div>
        </div>
      </Card>
    </div>
  );
};

我知道它正在工作，因为我在alert(props.data)里面有PersonalComponent

然后，这是我的AvatarComponent

<h1>Value: {props.data}</h1>
<input name="photoURL" value={props.data} onChange={props.handleChange} />

在这里，如果我alert(props.data)收到的空值是photoURL中HandlePersonal的实际值，但是我无法使用输入来更改该值。为什么？

我想让我在AvatarComponent内的输入中写入时，HandleContainer的值会发生变化

Answer 1

简而言之： HandlePersonal.handleChange()需要调用this.setState('photoUrl': 'input value')来更新状态。

如果需要在我的电话上提供详细的答案..im，那么不方便。

编辑 <input name="photoURL" value={props.data} onChange={props.onChange} /> 因为您将其作为onChange传递

为什么我不能使用输入来更改值？

1 个答案: