Question

我有一个使用Material ui表单构建的react功能组件，其中包含TextField和onChange事件是在“容器组件”中处理的。下面是表单代码，我需要在其中添加required作为客户端表单验证，但是它不起作用。我还需要在容器组件中添加一些逻辑吗？

<form className={classes.container}>
<Grid container item xs={12} alignItems="center">
<TextField
  id="outlined-bare"
  className={classes.textField1}
  defaultValue=""
  required
  margin="normal"
  variant="outlined"
  autoComplete="on"
  InputProps={{ style: { height: 40 } }}
  onChange={(e) => handleChange(e, 'Name')}
/>

这是容器组件中的事件处理程序，如下所示

 setInput = (e, source) => {
    e.preventDefault();
    switch  (source) {
        case "Name":
            this.setState({
                ...this.state,
                Name: e.target.value
            })
            break;
    default:
            this.setState({...this.state})
            break;
    }
}

 return (
        <div>
            <Drawer
                route={routes.abc}
                history={this.props.history}
                handleChange={this.setInput}
            />
        </div>
    )

出什么事了，什么不见了？我是ReactJs的新手。请提出。

Answer 1

关于可获得的信息，我建议做类似以下简化版本的事情：

容器

df[df['marital_status']=='married'].groupby('job').agg( {"age":"mean"} ).reset_index()

       job  age
0  manager   48

表单组件

df[df['marital_status']=='married'].groupby('job').agg( {"age":"mean","salary":"mean"} ).reset_index()

       job  age  salary
0  manager   48    9000

首先，如果您在输入中使用class Container extends Component { constructor(props) { super(props); this.state = { name: '', other_value: '', } } handleChange = (field, value) => { this.setState({ [field]: value }); } valid = () => { if (!this.state.name) { return false; } } submit = () => { if (this.valid()) { // call your redux submit } } render() { return ( <MyForm values={this.state} handleChange={this.handleChange} submit={this.submit} /> ); } }，则还应提供其值以确保它们保持同步。

第二，如果您希望const MyForm = (props) => { return ( <form onSubmit={props.submit}> <TextField onChange={(e) => props.handleChange('name', e.target.value)} value={props.values.name} required /> <TextField onChange={(e) => props.handleChange('other_value', e.target.value)} value={props.values.other_value} /> <button type="submit">Submit</button> </form> ); }道具起作用，则应确保表单调用了Submit函数。 onChange道具仅向下传递到required元素，该元素将由包装required (explanation of required)使用。因此，如果表单不是调用您的Submit函数的表单，则input将被忽略。

最后，我只提供了一个简单的验证函数，如果您希望它更全面，只需添加更多检查并返回特定错误或错误数组即可，而不是简单的true或false。如果只需要简单的必需检查，您也可以完全跳过验证功能。

如何在Material ui表单输入字段中添加验证

1 个答案: