javascript - 提交后如何使输入字段中的文本显示在屏幕上?
问题描述
我想在输入字段中输入任何内容,并在用户单击提交后将其显示在屏幕上。我知道这看起来很基础,但我是 React 新手。提前谢谢!
import React, { Component } from 'react';
class TextInput extends Component {
constructor(props){
super(props);
this.state = { info: "", showName: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(evt) {
evt.preventDefault();
this.setState({ info: evt.target.value })
}
handleSubmit(evt){
evt.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.info}
onChange={this.handleChange}/>
<button>Submit</button>
</form>
//text from input appears here
</div>
);
}
}
export default TextInput;
解决方案
如果我理解正确,您只想在用户单击提交后显示文本。在这种情况下,您可以使用 handleSubmitsubmittedInfo
例如在状态中设置一个特殊值,然后显示该值。
import React, { Component } from 'react';
class TextInput extends Component {
constructor(props){
super(props);
this.state = { info: "", submittedInfo: "", showName: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(evt) {
evt.preventDefault();
this.setState({ info: evt.target.value })
}
handleSubmit(evt){
evt.preventDefault();
this.setState({submittedInfo: this.state.info})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.info}
onChange={this.handleChange}/>
<button>Submit</button>
</form>
//text from input appears here
<div>{this.state.submittedInfo}</div>
</div>
);
}
}
export default TextInput;
另一种方法是在状态中存储一个 boolean isSubmitted
,表示用户是否已经提交了表单,然后显示this.state.info
如果isSubmitted
是true
推荐阅读
- wireshark - 如何使用选项 -T 字段列出数据包中每一层的信息?
- google-sheets - 两个电子表格之间的谷歌表格查询取决于每个电子表格中的项目
- android - 当回收站视图中的项目数量很少时,协调器布局太大
- c# - Web API 发布数组,但 frombody 始终为空
- javascript - 将 React 应用程序与谷歌表格同步
- php - 数据表和插入表单在一起时的路由方法
- c - 防止 Keil uVision 中布尔值的“枚举类型与另一种类型混合”警告
- node.js - bot 框架默认对话框未触发
- bash - 如何在文件的特定空行中插入文本(bash)
- python - python中的IOError同时滑动查询结果