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

好的，我的问题是如何以编程方式将道具添加到组件中，这是我的案例，我在我的

render（）

中有这个例子：

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

我想做的是修改我的

上的道具，即设置

error=true

和

helperText=“此处有错误”

，我如何在我的函数中做到这一点

---

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

您必须向组件添加状态

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

类MyComponent扩展了React.Component{ 状态={ 错误：false， 帮助文本：“”， } validateEmail=event=>{ 如果（event.target.name！=“电子邮件”）{ ///在此处设置HelperText和错误道具 this.setState（{error:true，helperText:“此处有错误”}） } }; 渲染( {this.state.helperText} ); }

---

您必须使用

状态

而不是

道具

进行添加

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>

   ....
);
}

class YourComponent扩展了React.Component{
构造函数（）{
状态={
错误：false，
帮助文本：“”，
}
}
validateEmail=event=>{
如果（event.target.name！=“电子邮件”）{
///在此处设置HelperText和错误状态
this.setState（{error:true，helperText:“此处有错误”}）
}
};
渲染(
...
{this.state.helperText}
....
);
}

要以编程方式添加属性，可以使用JSX扩展语法

{…props}

：

类MyComponent扩展了React.Component{ 状态={ 错误：false， 帮助文本：“”， 附加属性：{} } validateEmail=event=>{ 如果（event.target.name！=“电子邮件”）{ ///在此处设置HelperText和错误道具 这是我的国家({ 附加属性：{error:true，helperText:“此处有错误”} }) } }; 渲染( {this.state.helperText} );

---

}您只能在一种状态下执行此操作。只需使用

onChange（）

方法根据字段更改状态。如果在电子邮件字段中弹出错误，则在电子邮件字段的

onChange（）

方法中检查错误，如果出现错误，则相应地更改状态（error和helpertext）。更新状态后，更新将显示错误的字段。

我在上一页中使用了这种方法，但在本页中，我有大约8个字段，每个字段都需要专门设置错误/helpertext，因此设置8个状态听起来不是一个好方法，没有状态就无法直接操作吗？有很多方法，但这取决于您需要什么。我需要的是能够操作特定

文本字段

上的“error”值，通过

事件.目标

或诸如此类的方式来引用它，而不是通过状态当您调用validate函数时？当提交或更改时，请看一下这一点，我特别希望避免使用状态方法，因为我有多个字段，不想为每个字段创建状态。我特别希望避免使用状态方法，因为我有多个字段，不想为每个字段创建状态。如果我有多个字段具有不同的helperText值，这是行不通的，因为状态只能有一个值，所以帮助器文本将出现在每个状态上。错误也一样。被指定为状态的字段将随着状态的更新而自动更新，这是您无法控制的。您对文本字段进行的每次编辑都不能更改任何状态。我这样做了

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

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>

   ....
);
}