问题描述
这是代码! 实际上,这是一个非常新的反应,我正在做一个将要执行的项目,但是在执行此操作时,我却坚持在列表项中渲染输入字段的输出。如果还有其他解决方案,例如没有列表组,那将非常有帮助!
我在做实际的错误时,请有人看一下 预先感谢!
import React,{ Component,Fragment } from "react";
class MainPage extends Component {
state = { data: "" };
handleChange = (e) => {
e.preventDefault();};
handleSubmit = (e) => {
e.preventDefault();
this.setState({ data: e.target.value });
};
render() {
const mystyle = {
padding: "16px 16px 16px 60px",textAlign: "start",fontSize: "24px",fontFamily: 'Helvetica Neue",Helvetica,Arial,sans-serif',width: "500px",};
return (
<Fragment>
<h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
todos
</h1>
<form className="todo-form" onSubmit={this.handleSubmit}>
<input
type="text"
onChange={this.handleChange.bind(this)}
className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
style={mystyle}
placeholder="What needs to be done?"
/>
<button className="btn btn-primary btn-sm ml-3">Submit</button>
<ul className="list-group">
<li
className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
style={{ width: "200px",fontSize: "24px" }}
>
{this.state.data}
</li>
</ul>
</form>
</Fragment>
);}}
导出默认的MainPage;
解决方法
import React,{ Component,Fragment } from "react";
class MainPage extends Component {
state = { data: "" };
handleSubmit = (e) => {
e.preventDefault();
alert(data)
};
render() {
const mystyle = {
padding: "16px 16px 16px 60px",textAlign: "start",fontSize: "24px",fontFamily: 'Helvetica Neue",Helvetica,Arial,sans-serif',width: "500px",};
return (
<Fragment>
<h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
todos
</h1>
<form className="todo-form" onSubmit={this.handleSubmit}>
<input
type="text"
onChange={(e) => this.setState({data: e.target.value})}
className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
style={mystyle}
placeholder="What needs to be done?"
/>
<button className="btn btn-primary btn-sm ml-3">Submit</button>
<ul className="list-group">
<li
className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
style={{ width: "200px",fontSize: "24px" }}
>
{this.state.data}
</li>
</ul>
</form>
</Fragment>
);}}
,
尝试一下:
state = { data: "",FinalDataValue:"" };
handleChange = (e) => {
e.preventDefault();
this.setState({ data: e.target.value });};
handleSubmit = (e) => {
e.preventDefault();
this.setState({ FinalDataValue:this.state.data });};
并在渲染列表中将其写为:
<li
className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
style={{ width: "200px",fontSize: "24px" }}
>
{this.state.FinalDataValue}
</li>
,
您的代码中存在一些问题:
- 您要提交按钮。为此,您需要添加
type="submit"
<button className="btn btn-primary btn-sm ml-3" type="submit">
Submit
</button>
- 您需要为
input
维护两个状态,为todo's
维护第二个状态。这样,您始终可以在用户提交表单时追加现有的待办事项:
state = { data: [],input: "" };
- 最后一次保存的是
onSubmit
,但还没有保存e.target.value
,相反,您需要保存在onHandleChage
这里是完整代码:
import React,Fragment } from "react";
class MainPage extends Component {
state = { data: [],input: "" };
handleChange = (e) => {
e.preventDefault();
this.setState({ input: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
this.setState({ data: [...this.state.data,this.state.input],input: "" });
};
render() {
const mystyle = {
padding: "16px 16px 16px 60px",width: "500px"
};
return (
<Fragment>
<h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
todos
</h1>
<form className="todo-form" onSubmit={this.handleSubmit}>
<input
type="text"
onChange={this.handleChange.bind(this)}
value={this.state.input}
className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
style={mystyle}
placeholder="What needs to be done?"
/>
<button className="btn btn-primary btn-sm ml-3" type="submit">
Submit
</button>
<ul className="list-group">
{this.state.data.map((data,i) => {
return (
<li
className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
style={{ width: "200px",fontSize: "24px" }}
key={"todo-" + i}
>
{data}
</li>
);
})}
</ul>
</form>
</Fragment>
);
}
}
export default function App() {
return (
<div className="App">
<MainPage />
</div>
);
}
以下是演示:https://codesandbox.io/s/xenodochial-banzai-qwxfu?file=/src/App.js:0-1762