无法在React.js中输入字段。为什么？

Question

在这里，我不能在输入字段中键入。为什么会这样？

class Profile extends Component {
  static contextType = FirebaseContext;

  constructor(props) {
    super(props);

    this.state = {
      user:{}
    }

    this.updateProfile = this.updateProfile.bind(this);
  }

  componentDidMount()
  {
        console.log("Profile")

        this.context.auth.onAuthStateChanged((user) => {

          if(user)
          {
            this.setState({user})
          } else
          {
            this.setState({user: null})
          }

        })
  }

  updateProfile(event) {
    event.preventDefault();

    var userData = this.context.auth.currentUser;

    userData.updateProfile({
      displayName: this.state.user.displayName
    }).then(function() {
      console.log("Profile Updated");
    }).catch(function(error) {
      console.log("Error Profile Updated");
    });

    userData.updateEmail(this.state.user.email).then(function() {
      console.log("Email Updated");
    }).catch(function(error) {
      console.log("Error Email Updated");

    });
  }

  render() {
    return (
      <>
      <form onSubmit={this.updateProfile}>
      <input onChange={event => this.setState({displayName: event.currentTarget.value})} type="text" value={this.state.user.displayName} placeholder="Name" />
      <input onChange={event => this.setState({email: event.currentTarget.value})} type="email" value={this.state.user.email} placeholder="E mail Id" />
      </form>
      </>
    );
  }
}

.................................................................................................................................... ....................................................................................................................................

Answer 1

你更新状态的方式是错误的，如何正确地做到这一点。

   class Profile extends Component {
  static contextType = FirebaseContext;

  constructor(props) {
    super(props);

    this.state = {
      user: {}
    };

    this.updateProfile = this.updateProfile.bind(this);
  }

  componentDidMount() {
    console.log("Profile");

    this.context.auth.onAuthStateChanged(user => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }

  updateProfile(event) {
    event.preventDefault();

    var userData = this.context.auth.currentUser;

    userData
      .updateProfile({
        displayName: this.state.user.displayName
      })
      .then(function() {
        console.log("Profile Updated");
      })
      .catch(function(error) {
        console.log("Error Profile Updated");
      });

    userData
      .updateEmail(this.state.user.email)
      .then(function() {
        console.log("Email Updated");
      })
      .catch(function(error) {
        console.log("Error Email Updated");
      });
  }
handleChange = e => {
const target = e.target
this.setState(current => ({
  user: { ...current.user, [target.name]: target.value }
}));
};


  render() {
    return (
      <>
        <form onSubmit={this.updateProfile}>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.user.displayName}
            placeholder="Name"
            name="displayName"
          />
          <input
            onChange={this.handleChange}
            type="email"
            value={this.state.user.email}
            placeholder="E mail Id"
            name="email"
          />
        </form>
      </>
    );
  }
}

这里有一个工作方法 例子

Answer 2

你使用的是不同的数值。

<input onChange={event => this.setState({displayName: event.currentTarget.value})} type="text" value={this.state.user.displayName} placeholder="Name" />

你的 setState 呼叫 state.displayName但你读的是 state.user.displayName.

试着改变你的 setState 调用到。

this.setState({ user: { ...this.state.user, displayName: event.currentTarget.value } })

并对你的其他输入进行类似的修改。