How to manage multi Text Field validation in material-ui react?

问题

I am creating a form in Materia-UI and React.js, and I am making validation of two TextField. I want to validate both TextFields with same error and textHelper props. Below I have show a piece of code of my work. If somebody have an idea please share with me, it will be helpful.

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}
       />
    )
  }
}

Helper text is shown in both of TextFields even if I write only in first. Please help me to solve this issue, you will save my day.

来源：https://stackoverflow.com/questions/60797734/how-to-manage-multi-text-field-validation-in-material-ui-react

标签

javascript

reactjs

validation

material-ui