如何在material-ui react中管理多文本字段验证？答案

【问题标题】：How to manage multi Text Field validation in material-ui react?如何在material-ui react中管理多文本字段验证？
【发布时间】：2020-03-22 09:32:17
【问题描述】：

我正在 Materia-UI 和 React.js 中创建一个表单，并且正在验证两个 TextField。我想验证两个具有相同 error 和 textHelper 道具的 TextField。下面我展示了我工作的一段代码。如果有人有想法，请与我分享，这将有所帮助。

const AddPost = ({error, helperText, handleInputChange, handleSubmit}) => {
  <div>
    <form onSubmit={handleSubmit}>
    <TextField value={titleValue} onChange={handleInputChange} helperText={helperText} error={error} name={"title"} />
    <TextField value={bodyValue} onChange={handleInputChange} helperText={helperText} error={error} name={"body"} />
    </form>
  </div>
}


class Post extends React.Component {
    constructor(props) {
      super(props);
        this.state = {
          body: '',
          title: '',
          helperText: "",
          error: false,
    }
  }

  handleInputChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
    if (event.target.value < 1) {
      this.setState({
        error: true,
        helperText: "This field is required!",
      })
   } else {
      this.setState({
        error: false,
        helperText: "",
      })
    }
  }

  render(){
    return(
       <AddPost
          titleValue={this.state.title}
          bodyValue={this.state.body}
          handleInputChange={this.handleInputChange}
          handleSubmit={this.handleSubmit}
          helperText={this.state.helperText}
          error={this.state.error}
       />
    )
  }
}

帮助文本显示在两个 TextFields 中，即使我只先写。请帮我解决这个问题，你会拯救我的一天。

【问题讨论】：

标签： javascript reactjs validation material-ui

【解决方案1】：

这是一个迟到的答案，但也许对其他人有帮助。

我看到您的错误消息取决于您的错误状态。这意味着您可以在helperText 中添加 if 语句。所以你只需要更改错误状态即可更改helperText消息：

class Post extends React.Component {
    constructor(props) {
      super(props);
        this.state = {
          body: '',
          title: '',
          helperText: "This field is required!",
          error: false,
    }
  }

  handleInputChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
    if (event.target.value < 1) {
      this.setState({
        error: true
      })
   } else {
      this.setState({
        error: false
      })
    }
  }

  render(){
    return(
       <AddPost
          titleValue={this.state.title}
          bodyValue={this.state.body}
          handleInputChange={this.handleInputChange}
          handleSubmit={this.handleSubmit}
          helperText={this.state.error && this.state.helperText}
          error={this.state.error}
       />
    )
  }
}

如您所见，我在helperText if 语句中添加了：如果this.state.error === true 然后显示this.state.helperText，如果this.state.error === false 然后什么也不显示。

【讨论】：