如何使用类组件将无序列表显示在 <ul> React 窗体中的 JSX 元素中

Question

当我单击Submit按钮时，我想将一个根据表单输入值编译的无序列表写入<ul>。它是一个基于类的组件中的受控窗体。不幸的是，我还没有发现如何在没有钩子的情况下实现它。

export default  class  App extends React.Component {
constructor(props) {
super(props);

this.state = {
name: "",
email: "",
message: "",
demo: "",
};
this.changeHandler = this.changeHandler.bind(this);
this.submitFormHandler = this.submitFormHandler.bind(this);
}

changeHandler = (e)  => { 
this.setState = {
name: e.target.value,
email: e.target.value,
message: e.target.value,
demo: ` 
<li>${this.state.name}</li>
<li>${this.state.email}</li>
<li>${this.state.message}</li> `
};
this.setState(this.setState)
};
submitFormHandler = (e)  => { 
e.preventDefault();
// I guess the solution will be here somehow
};

render() { 
return (
<form  onSubmit={this.submitFormHandler} > 

<label htmlFor="name">Name:</label>    <br/>
<input id="name" type="text" value={this.state.name} onChange={this.changeHandler} />
<br/>
<label htmlFor="mail">E-mail:</label>    <br/>
<input id="mail" type="email" value={this.state.email} onChange={this.changeHandler} />
<br/>
<label htmlFor="msg">Message:</label>    <br/>
<textarea id="msg" type="email" value={this.state.message} onChange={this.changeHandler} />
<h4>Values of the inputs:</h4>
<ul id="demo">
{this.state.demo}  {/* the list would be here! */}
</ul>
<button type="submit">Submit</button>

</form>
);  }
};

Answer 1

为了在提交时显示内容，我会制作一个isSubmitted标志。此外，您控制的输入也不起作用。当输入ids与状态中的names相对应时，我们可以在onChange处理程序函数中更容易地处理它们。此外，当它被提交时，我们可以防止用户更新changeHandler中的数据并提前返回。所以我在下面的代码中修复了它：

// import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
message: '',
isSubmitted: false,
};
this.changeHandler = this.changeHandler.bind(this);
this.submitFormHandler = this.submitFormHandler.bind(this);
}
changeHandler = ({ target }) => {
if (this.state.isSubmitted) return;
this.setState({ [target.id]: target.value });
};
submitFormHandler = (e) => {
e.preventDefault();
this.setState({ isSubmitted: true });
};
render() {
return (
<div>
<form onSubmit={this.submitFormHandler}>
<label htmlFor="name">Name:</label> <br />
<input
id="name"
type="text"
value={this.state.name}
onChange={this.changeHandler}
/>
<br />
<label htmlFor="email">E-mail:</label> <br />
<input
id="email"
type="email"
value={this.state.email}
onChange={this.changeHandler}
/>
<br />
<label htmlFor="message">Message:</label> <br />
<textarea
id="message"
type="email"
value={this.state.message}
onChange={this.changeHandler}
/>
<br />
<button type="submit">Submit</button>           
</form>            
{this.state.isSubmitted && (
<React.Fragment>
<h4>Values of the inputs:</h4>
<ul>
<li>{this.state.name}</li>
<li>{this.state.email}</li>
<li>{this.state.message}</li>
</ul>
</React.Fragment>
)}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>