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

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 = {&nbsp; &nbsp;error: false,&nbsp; &nbsp;helperText: '',&nbsp; &nbsp;additionalProps: {}}validateEmail = event => {&nbsp; &nbsp; if (event.target.name !== "email") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;///Set HelperText and error props here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;additionalProps: {error: true, helperText: "some error here"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; }&nbsp;&nbsp; };render (&nbsp; &nbsp;<TextField&nbsp; &nbsp; &nbsp; {...this.state.additionalProps}&nbsp; &nbsp; &nbsp; name="password"&nbsp;&nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; label="Password"&nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; className={classNames(styles.signUpInputField, styles.override)}&nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; onBlur={this.validate}&nbsp; &nbsp; &nbsp; error={this.state.error}&nbsp; &nbsp;/>&nbsp; &nbsp;{this.state.helperText});}

Answer 2

您必须添加 usingstate而不是props。class YourComponent extends React.Component {&nbsp;constructor(){&nbsp; state = {&nbsp; &nbsp;error: false,&nbsp; &nbsp;helperText: '',&nbsp;}}validateEmail = event => {&nbsp; &nbsp; if (event.target.name !== "email") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;///Set HelperText and error state here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({error: true, helperText: "some error here"})&nbsp; &nbsp; }&nbsp; };render (&nbsp; &nbsp;...&nbsp; &nbsp;<TextField&nbsp; &nbsp; &nbsp; name="password"&nbsp;&nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; label="Password"&nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; className={classNames(styles.signUpInputField, styles.override)}&nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; onBlur={this.validate}&nbsp; &nbsp; &nbsp; error={this.state.error} // add this new line&nbsp; &nbsp;/>&nbsp; &nbsp;<span>{this.state.helperText}</span>&nbsp; &nbsp;....);}

Answer 3

您必须为组件添加一个状态。对于多个输入，我实现了 这个class MyComponent extends React.Component {state = {&nbsp; &nbsp;error: false,&nbsp; &nbsp;helperText: '',}validateEmail = event => {&nbsp; &nbsp; if (event.target.name !== "email") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;///Set HelperText and error props here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({error: true, helperText: "some error here"})&nbsp; &nbsp; }&nbsp;&nbsp; };render (&nbsp; &nbsp;<TextField&nbsp; &nbsp; &nbsp; name="password"&nbsp;&nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; label="Password"&nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; className={classNames(styles.signUpInputField, styles.override)}&nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; onBlur={this.validate}&nbsp; &nbsp; &nbsp; error={this.state.error}&nbsp; &nbsp;/>&nbsp; &nbsp;{this.state.helperText});}