类型错误：无法读取未定义的属性'state'，即使已绑定

Question

>im 尝试在我的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

state

在类组件中可用，而不是函数组件。

除了 React 之外，你正在做的事情在 JS 中是不合法的，你在一个类中定义状态，并尝试在不属于该类的不同函数中使用它。

您要做的是将函数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" for="customSwitch1">Active Status</label>
</div>
<br/>
<button type="submit" className="submit btn col-sm-1">Save</button>
</form>
</div>
</div>
</div>
)
}
}

Answer 2

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