如何验证应接受20个以下字符的名称，使用reactjs时不应为空

我是reactjs新手，我的目标是验证商店名称，它不应该是空的，也不应该超过20个字符。它应该在点击提交按钮之前显示错误消息。 我想在handlechange函数中处理此验证。我试过了，但不确定是否正确。我知道这个查询可能很简单，但我无法理解，因为我是新手

代码如下：

  onChange= (name, value) => {
    // this.setState({ [e.target.name]: e.target.value })
    let errors = this.state.errors;
    if (!value || value.length === 0) {
      errors[name] = "Store Name is required";
    } else if (value.length > 20) {
      errors[name] = "Store Name should not increase 20 characters";
    } else {
      errors[name] = "";
    }
  };

有人能帮我查询一下吗？

修改一下你的更改

onChange = ({name, value}) => {
  let errors = {...this.state.errors};
  if (!value || value.length === 0) {
    errors[name] = "Store Name is required";
  } else if (value.length > 20) {
    errors[name] = "Store Name should not increase 20 characters";
  } else {
    errors[name] = "";
  }

  this.setState({ [name]: value, errors })
};

<TextField
        //...
        onChange={e => this.onChange(e.target)}
        error={this.state.errors.storeName.length}
        helperText={this.state.errors.storeName}
      />

onChange=（{name，value}）=>{
让errors={…this.state.errors}；
如果（！value | | value.length==0）{
错误[名称]=“需要存储名称”；
}否则如果（value.length>20）{
错误[名称]=“存储名称不应增加20个字符”；
}否则{
错误[名称]=“”；
}
this.setState（{[name]：值，errors}）
};
this.onChange（e.target）}
error={this.state.errors.storeName.length}
helperText={this.state.errors.storeName}
/>

类示例扩展React.Component{
构造函数（）{
超级（）；
此.state={
店名：“，
错误：{
店名：“，
“恐怖：”
}
};
}
onChange=（名称、值）=>{
//this.setState（{[e.target.name]：e.target.value}）
让errors=this.state.errors；
如果（！value | | value.length==0）{
错误[名称]=“需要存储名称”；
}否则如果（value.length>20）{
错误[名称]=“存储名称不应增加20个字符”；
}否则{
错误[名称]=“”；
}
this.setState（{errors}）//更新状态忘记更新
//错误状态
};
onSubmit=（）=>{
//如果表单有效，则只有“提交”按钮可用
const{errors}=this.state
if（errors.storeName.length）{
const data={storeName:this.state.storeName}；
console.log（“提交后”，数据）；
这是我的国家({
错误：{
…错误，
“您的错误消息”
}
})
返回
}
};
render（）{
const{errors}=this.state
console.log（this.state.errors）//查看控制台中的内容
返回(
{errors.submitror}
提交
);
}
}
导出默认样本；

只需编写两个不同情况的单元测试，看看它是否满足您的要求。您必须添加

onChange={（e）=>this.setState（{storeName:e.target.value}）

到TextInput@Kalhan.Toress-我想在超过20个字符时显示错误，如果用户单击提交而未在输入中写入任何内容field@Arunya，希望这就是你想要的，@谢谢你在这个问题上帮助我！：）你能帮我把什么作为回报吗？我想在输入字段下方显示一条错误消息“需要存储名称”在

onSubmit

中，要处理onSubmit，我建议您在出现错误时禁用按钮，如果您不想禁用按钮并显示一些自定义错误，您可以做的是创建一个新的错误状态，并在提交时进行更新。如果您在字段中出现错误，并在文本下方显示该错误。对不起，我没有理解您。我正在使用相应的文本字段

class Sample extends React.Component {
    constructor() {
        super();
        this.state = {
            storeName: "",
            errors: {
                storeName: "",
                submitError:""
            }
        };
    }
onChange = (name, value) => {
    // this.setState({ [e.target.name]: e.target.value })
    let errors = this.state.errors;
    if (!value || value.length === 0) {
        errors[name] = "Store Name is required";
    } else if (value.length > 20) {
        errors[name] = "Store Name should not increase 20 characters";
    } else {
        errors[name] = "";
    }
    this.setState({ errors }) //update state you forget to update your 
    //error state

};



onSubmit = () => {
    //if form is valid then only submit button should work
    const { errors } = this.state
    if (errors.storeName.length) {
        const data = { storeName: this.state.storeName };
        console.log("after submitting", data);
        this.setState({
          errors:{
          ...errors,
          submitError:"your error message"
               }
         })
        return

    }

};
render() {
const{errors}=this.state
    console.log(this.state.errors)// see what you are getting in the console
    return (
        <div>
            <form className={classes.root} noValidate autoComplete="off">
                <TextField
                    id="outlined-basic"
                    label="Store Name"
                    name="storeName"
                    value={this.state.storeName}
                    variant="outlined"
                    onChange={this.onChange}
                // error={this.state.errors.storeName.length}
                // helperText={this.state.errors.storeName}
                />
              <p style={{color:'red'}}>{errors.submitError}</p>
            </form>
            <Button variant="contained" color="primary" onClick={this.onSubmit}>
                Submit
  </Button>
        </div>
    );
}
}

export default Sample;