reactjs - Cannot type into input field in React

Question

I am struggling with my input field & haven't been able to find a working solution. I somehow cannot type anything into them. Any suggestions on how I could solve it?

Is there anything wrong with my onChange() that I am overseeing? I don't get any errors though. That's why it is so weird.

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>
  );
  }
}

Thanks a lot in advance!

标签： reactjs

Answer 1

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

您的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>
    );
 }