Question

我试图在我的reactjs网页上打印状态，我已经像其他答案所说的那样绑定了函数，但是它仍然给我同样的错误，这是我的代码

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

Ctrl-D在类组件而不是功能组件中可用。

除了做出反应之外，您正在做的事情在JS中是不合法的，您要在一个类中定义状态，然后尝试在不属于该类的其他函数中使用它。

您要做的是将state函数中的代码移动到类组件中的FormTambah函数中

render

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

2 个答案: