单击不显示表单反应

Question

当您按下Edit按钮时，我正在尝试显示表单。在我的控制台中，我看到PRESSED!!!，但表单未显示。我不需要绑定，因为我使用箭头函数。即使我删除表单并放置 H1 标签，它仍然没有显示。可能是什么问题？.

addForm = () => {
const { title } = this.state;
<form onSubmit={this.handleSubmit}>
<label>Enter the title of the book!</label>
<input type="text" name="title" value={title} onChange={this.handleChange} />
<button type="submit" className="btn btn-success mr-1 mt-1">Add Book!</button>
</form>
console.log("PRESSED!!!")
}

selectButton = () => {
if (this.props.typeButton == "CRUD") {
return (
<React.Fragment>
<button className="btn btn-success mr-1 mt-1" onClick={this.addForm}>Add</button>
<button className="btn btn-warning mr-1 mt-1">Edit</button>
<button className="btn btn-danger mr-1 mt-1">Delete</button>
</React.Fragment>);

}
}

Answer 1

onClick 中的函数包含 JSX，而不是逻辑。您应该在状态中添加一个布尔值，以指示是否应显示表单，并在单击时更新它。然后，有条件地显示它，就像你对selectButton本身所做的那样(我猜它是一个类组件，对吧？

addForm = () => {
const { title, showForm } = this.state;
if (showForm) 
return (
<form onSubmit={this.handleSubmit}>
<label>Enter the title of the book!</label>
<input type="text" name="title" value={title} onChange={this.handleChange} />
<button type="submit" className="btn btn-success mr-1 mt-1">Add Book!</button>
</form>
);
}

selectButton = () => {
if (this.props.typeButton == "CRUD") {
return (
<React.Fragment>
<button className="btn btn-success mr-1 mt-1" onClick={this.setState({...this.state, showForm: true})}>Add</button>
<button className="btn btn-warning mr-1 mt-1">Edit</button>
<button className="btn btn-danger mr-1 mt-1">Delete</button>
</React.Fragment>
);
}
}
render() {
return (<>
{selectButton()}
{addForm()}
</>);
}

顺便说一句，<></>是<React.Fragment></React.Fragment>的简短语法