onSubmit 不想设置状态

Question

我正在尝试使用Material UI构建一个表单。我的TextField需要从用户那里收集信息，在提交时，我的handleSubmit((函数应该将状态设置为用户输入的状态。目前还没有。我尝试使用"onChange"而不是"onSubmit"。这种方法允许我保存信息，但是UI开始表现失常，允许用户在TextField中只输入一个字母。我很困惑。我真的很感激你的建议。请参阅下面的代码：

import React, { Component } from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import './Navbar.css';
import * as AiIcons from "react-icons/ai";

class StackO extends Component {
constructor() {
super()
this.state = {
state_foo: null,
}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit = e => {
e.preventDefault();
this.setState({ 
state_foo: e.target.value,
});
}
showstate = event => {
event.preventDefault();
console.log(this.state.state_foo)
}
render() {
const CssTextField = withStyles({
root: {
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: 'white',
},
'& .MuiInput-underline:before': {
borderBottomColor: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
},
})(TextField);


const useStyles = makeStyles((theme) => ({
margin: {
margin: theme.spacing(4),
},
}));

return (
<>
<form onSubmit={this.handleSubmit}>
<div>
<div className={useStyles.margin}>
<Grid container spacing={1} alignItems="flex-end">
<Grid item>
<AiIcons.AiOutlineForm />
</Grid>
<Grid item>
<CssTextField className={useStyles.root}
value={this.state.state_foo}
style ={{width: '125%'}}
inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
id="input-with-icon-grid" label="Proposed term"
InputLabelProps={{style: { color: 'white'}}}
/>
</Grid>
</Grid>
</div>
</div>
<button type='submit' onClick={this.showstate}>Submit</button>
</form>
</>
)
}
}
export default StackO

Answer 1

您可能会在控制台中看到以下警告：

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

您当前正在告诉input从this.state.state_foo读取其值，但从未更新该状态。要解决此问题，请将onChange处理程序传递给您的输入：

...
handleChange(e) {
this.setState({ state_foo: e.target.value });
}
...
render() {
...
<input value={this.state.state_foo} onChange={this.handleChange} />
...
}

另一种方法是使输入不受控制并且只从提交事件读取状态；反应方式"；就是自己管理国家。

您可能一次只能向输入中添加一个字符，因为您正在阻止默认行为。

旁注：我会厌倦把withStyles和makeStyles代码放在你类的render方法中；考虑将其从渲染中移除，以免导致不必要的UI错误。