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

debugcn 发表于 Dev

奥马尔·侯赛因

好的，所以我的问题是如何以编程方式向组件添加道具，这是我的情况，render()例如，我有这个：

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

您可以看到它进入了一个validate函数，这是一个冗长的函数，因此，我仅举一个示例，而不是我的实际validate函数：

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

我想发生的是在我的道具上进行修改<TextField>，即设置error= true和helperText= "some error here"，我该如何在函数中执行此操作？

编辑：我将需要避免使用状态，因为有多个字段需要专门分配，并且每个状态的多个状态并不是一个干净的方法。

汉密尔顿

您必须向组件添加状态。

对于多个输入，我实现了这一点

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。