TypeError：无法读取未定义的属性“状态”，即使已经绑定

Question

im trying to print a state in my reactjs web page, i already bind the function just like the other answer says but it still gave me the same error, here is my code

export class Tambah extends React.Component{
  constructor(){
    super();
    this.add = this.add.bind(this);
  }

  add(event){
    this.setState({company: event.target.value})
  }
}

function FormTambah(){
  return(
    <div className="konten container-sm">
    <br></br><br></br>
    <div className="tabel card rounded">
      <div className="card-body">
      <p className="head panel-body">Add User</p>
      <br/><br/>
      <form>
        <p>Email*</p>
        <input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
        <br/>
        <p>Full Name*</p>
        <input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
        <br/>
        <div className="stat custom-control custom-switch">
          <input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
          <label className="custom-control-label" for="customSwitch1">Active Status</label>
        </div>
        <br/>
        <button type="submit" className="submit btn col-sm-1">Save</button>
      </form>
    </div>
      </div>
    </div>
  )
}

错误发生在这里：

<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>

在我看到另一个问题后，我已经绑定了add方法，但它仍然给了我同样的错误，谢谢，任何帮助将不胜感激

Answer 1

将FormTambah放入render ：

export class Tambah extends React.Component {
    constructor() {
        super();
        this.add = this.add.bind(this);
    }

    add(event) {
        this.setState({ company: event.target.value });
    }

    render() {
        return (
            <div className="konten container-sm">
                <br></br>
                <br></br>
                <div className="tabel card rounded">
                    <div className="card-body">
                        <p className="head panel-body">Add User</p>
                        <br />
                        <br />
                        <form>
                            <p>Email*</p>
                            <input
                                type="text"
                                value={this.state.company}
                                onChange={this.add}
                                className="email form-control col-sm-6"
                            />
                            <br />
                            <p>Full Name*</p>
                            <input
                                type="text"
                                className="email form-control col-sm-7"
                                placeholder="Enter Fullname"
                                onChange={this.FullName}
                            ></input>
                            <br />
                            <div className="stat custom-control custom-switch">
                                <input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1" />
                                <label className="custom-control-label" htmlFor="customSwitch1">
                                    Active Status
                                </label>
                            </div>
                            <br />
                            <button type="submit" className="submit btn col-sm-1">
                                Save
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 2

state可用于 class 组件而非 function 组件。

also beside react, what you're doing is not legal in JS, you're defining state in one class and try to use it in a different function that is not belong to that class.

您要做的是移动 FormTambah function 中的代码以在FormTambah组件中render function

export class Tambah extends React.Component{
  constructor(){
    super();
    this.add = this.add.bind(this);
  }

  add(event){
    this.setState({company: event.target.value})
  }

  render(){
  return(
    <div className="konten container-sm">
    <br></br><br></br>
    <div className="tabel card rounded">
      <div className="card-body">
      <p className="head panel-body">Add User</p>
      <br/><br/>
      <form>
        <p>Email*</p>
        <input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
        <br/>
        <p>Full Name*</p>
        <input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
        <br/>
        <div className="stat custom-control custom-switch">
          <input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
          <label className="custom-control-label" for="customSwitch1">Active Status</label>
        </div>
        <br/>
        <button type="submit" className="submit btn col-sm-1">Save</button>
      </form>
    </div>
      </div>
    </div>
  )
  }

}