无法在 React 中输入输入字段答案

【问题标题】：Cannot type into input field in React无法在 React 中输入输入字段
【发布时间】：2020-02-25 11:36:58
【问题描述】：

我正在为我的输入字段而苦苦挣扎，并且无法找到可行的解决方案。我不知何故无法在其中输入任何内容。关于如何解决它的任何建议？

我正在监督的 onChange() 有什么问题吗？我没有收到任何错误。这就是为什么它如此奇怪。

export default class SignIn extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      id: '',
    };
  }

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

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

    this.setState({
      id: uuid()
    }, () => {
      axios.post('https://api.xyz.co/api/signup?id=' + this.state.id + '&email=' + this.state.email + '&name=' + this.state.name)
      .then((result) => {
        console.log("submitted mail to join community");
        console.log('hi' + this.state.name)
        this.jump();
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

jump() {
        this.props.history.push({
          pathname: `/sceneries/8`,
          state: {
            name: this.state.name
          },
        })
  }

  render() {

    return (
      <div id="signIn">
        <form action="" method="post" className="form" >
            <input type="text" placeholder="Your first name" value={this.state.name} onChange={this.handleChange}/>
            <input
              type="email"
              value={this.state.email}
              onChange={this.handleChange}
              placeholder="Your email"
            />
            <button id="submitEmail" type="submit" onClick={this.signup}>
              Join us
            </button>
          </form>
</div>
  );
  }
}

提前非常感谢！

【问题讨论】：

尝试添加名称属性以输入“电子邮件”。
您的输入中缺少“名称”属性。在您的 handleChange 函数中，您正在解构 const { name, value } = e.target，但您没有在输入中设置 name 属性。
您需要为每个<input> 元素添加一个name 属性。即：<input name="email" type="email" value=.....>
虽然我们不介意在 SO 上提供帮助，但如果您将 console.log 放入您的 handleChange 函数并记录 name 和 value，您会很容易发现错误.当某些事情不起作用时，最好的办法是跟踪数据流并在此过程中记录事情，以确保数据符合您的预期。如果一切看起来都符合预期，但仍然无法正常工作，那么是时候在 SO 上发布问题了。
[e.target.name]: e.target.value in handlechange 在添加名称后处于设置状态。

标签： reactjs

【解决方案1】：

您只是缺少<input> 元素上的name 属性：

您的render 方法应如下所示：

render() {
    return (
      <div id="signIn">
        <form action="" method="post" className="form" >
          <input
            name="name"  //name attribute here
            type="text"
            placeholder="Your first name"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <input
            name="email" //name attribute here
            type="email"
            value={this.state.email}
            onChange={this.handleChange}
            placeholder="Your email"
          />
          <button id="submitEmail" type="submit" onClick={this.signup}>
            Join us
          </button>
        </form>
      </div>
    );
 }

【讨论】：

【解决方案2】：

您必须将name 属性添加到您的input。

e.target.name 在您的代码中不可用。

【讨论】：