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

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"，我怎样才能在我的函数中做到这一点？编辑：我需要避免使用状态，因为有多个字段需要专门分配，并且每个字段的多个状态并不是一种干净的方法 imo。

Answer 1

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

您必须添加 usingstate而不是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 3

您必须为组件添加一个状态。

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

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}

);

}