Question

好的，所以我的问题是如何以编程方式向组件添加道具，这是我的情况，例如，我在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"，我该如何在函数中做到这一点？

编辑：我需要避免使用状态，因为有多个字段需要专门分配，并且每个状态都不能使用imo。

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

您必须在组件中添加状态。

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

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

要以编程方式添加属性，可以使用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}
);
}

Answer 4

您只能在一种状态下执行此操作。只需使用onChange()方法即可根据字段更改状态。如果假定错误在电子邮件字段上弹出，请在电子邮件字段的onChange()方法中检查错误，如果发生错误，请相应地更改状态（错误和帮助文本）。并在更新状态后更新将显示错误的字段。

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

4 个答案: