javascript - 以编程方式向元素添加属性

Question

好吧，我的问题是如何以编程方式向组件添加 Prop ，这是我的情况，我的 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> 上的 Prop ，即设置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>

   ....
);
}