Question

这是我反应学习的开始。我面临一些有关输入字段的问题。如果我在表单中使用值字段，那么此输入字段将不可更改。就像我无法在该文件上写任何东西。但是，尽管我删除了提起诉讼的文件，但仍能正常工作。这是我的代码

import React, { Component } from 'react';


export class Registration extends Component{
constructor(){
    super();

    this.state = {
        name: '',
        email: '',
        password: '',
    };

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

onChange(e){

    this.setState = ({
        name: e.target.value
    });
}
render(){
    return(
            <div className="registration">
                <form name="registration" id="registration" >
                <div className="userName">
                    <label> Name : </label>
                    <input name="name" type="text" onChange={this.onChange} value={this.state.name}/>
                    <br/>
                </div>
                    <label> Email : </label>
                    <input name="email" type="email" />
                    <br/>
                    <label> Password : </label>
                    <input name="password" type="password" />
                    <br/>
                </form>
            </div>
        );
}
}

在名称输入字段上，我正在使用value属性。这就是这个问题。

Answer 1

问题是您不小心写了

this.setState = ({
    name: e.target.value
});

代替

this.setState({
    name: e.target.value
});

=是不正确的，因为您正在尝试调用方法而不是使用字典声明变量。

Answer 2

您的this.setState设置有误。

class Registration extends React.Component {
  constructor() {
    super();

    this.state = {
      name: "",
      email: "",
      password: ""
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  render() {
    return (
      <div className="registration">
        <form name="registration" id="registration">
          <div className="userName">
            <label> Name : </label>
            <input
              name="name"
              type="text"
              onChange={e => this.onChange(e)}
              value={this.state.name}
            />
            <br />
          </div>
          <label> Email : </label>
          <input name="email" type="email" />
          <br />
          <label> Password : </label>
          <input name="password" type="password" />
          <br />
        </form>
      </div>
    );
  }
}

ReactDOM.render(<Registration />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

使用值属性时，输入字段不可在react中单击

2 个答案: