Добавление свойства к элементу программно

Question

Хорошо, поэтому мой вопрос заключается в том, как я могу программно добавить опору в компонент, вот мой случай, у меня это есть в моем render(), например:

              <TextField
                name="password"
                variant="outlined"
                label="Password"
                type="password"
                className={classNames(styles.signUpInputField, styles.override)}
                onChange={this.handleChange}
                onBlur={this.validate}
              ></TextField>

Вы можете видеть, что это идетв функцию проверки, это длинная, так что я просто приведу вам пример, а не мою действительную функцию проверки:

  validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
    } 
  };

Что я хочу сделать, это изменить реквизиты на моем <TextField>, а именнонастройка error= true и helperText= "some error here", Как я могу сделать это внутри моей функции?

РЕДАКТИРОВАТЬ: мне нужно было бы избегать использования состояний, так как есть несколько полей, которые должны быть назначены исключительно, и несколько состоянийдля каждого не чистый подход имо.

Answer 1

Вы должны добавить, используя state вместо props.

class YourComponent extends React.Component {
 constructor(){
  state = {
   error: false,
   helperText: '',
 }
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error state here
         this.setState({error: true, helperText: "some error here"})
    }
  };

render (
   ...

   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error} // add this new line
   />
   <span>{this.state.helperText}</span>

   ....
);
}

Answer 2

Вы должны добавить состояние для вашего компонента.

Для нескольких входов я реализую это это

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({error: true, helperText: "some error here"})
    } 
  };

render (
   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}

Answer 3

Вы можете сделать это только в одном состоянии. Просто используйте метод onChange(), чтобы изменить состояние в соответствии с полем. Если предположить, что ошибка появляется в поле электронной почты, в методе onChange() поля электронной почты проверьте наличие ошибки и, если ошибка возникла, измените состояние (error и helpertext) соответствующим образом. И обновите поле, где будет отображаться ошибка, после обновления состояния.

Answer 4

Для добавления свойств программно вы можете использовать синтаксис JSX {...props}:

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
   additionalProps: {}
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({
         additionalProps: {error: true, helperText: "some error here"}
         })
    } 
  };

render (
   <TextField
      {...this.state.additionalProps}
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}