如何动态添加元素属性

Question

我正在使用reactjs应用程序，并且坚持动态添加属性。

我有电子邮件输入字段和一个提交按钮，当单击一个提交按钮时，如果电子邮件无效，我想添加错误消息。 到目前为止，这是我所做的...

<TextField label='Email'/>
<Button onPress()=>this.doSomethingFunction() />

我想做doSomethingfunction（）以动态添加错误属性，如下所示

 <TextField label='Email' error="invalid entry"/>

我面临的问题是，如果我离开error属性，如上所示，即使用户输入电子邮件地址，该错误消息也会出现。 我正在考虑的解决方案是在发现属性无效后添加属性，但是我不动态地进行操作。

Answer 1

您可以使用状态变量来更新UI。 因此，请尝试执行以下操作：

constructor(props) {
  super(props);
  this.state = {
    validStatus: 0 // initial state, 1: valid state, 2: invalid state
  } 
}

doSomethingFunction = () => {
  ...
  if (email is valid) {
    this.setState({ validStatus: 1 });
  } else {
    this.setState({ validStatus: 2 });
  }
  ...
}

render() {
  const { validStatus } = this.state;
  return (
    <View>
      ...
      {validStatus !== 2 && <TextField label='Email'/>
        <Button onPress()=>this.doSomethingFunction() />}
      {validStatus === 2 && <TextField label='Email' error="invalid entry"/>}
      ...
    </View
  );
}

Answer 2

只是使用状态。 您可以将TextField错误属性设置为接收emailError状态。 因此，当您单击按钮时， emailError值将被更改。

class MyComponent extends React.Component {
  state = {
    emailError: ''
  }

  validate = () => {
    this.setState({emailError: 'invalid entry'})
  }

  render () {
    return (
      <View>
        <TextField label='Email' error={this.state.emailError} />
        <Button onPress={this.validate}/>
      </View>
    )
  }
}

Answer 3

这可以使用组件的状态并根据状态进行一些条件渲染来完成。 这是一个粗略的伪代码，它显示了如何使用状态进行条件渲染

class MyComponent extends React.Component {

  constructor() {
    super();
    this.state = {isError: false}
  }

  validate() {
    if (inputIsInvalid) {
      this.setState({isError: false})
    }
  }

  render() {
    let textField = <TextField label='Email'/>;
    if(this.state.isError)
      textField = <TextField label='Email' error="invalid entry"/>;
    return (
      {textField}
      <Button onPress()=>this.validate() />
    );
  }

}

Answer 4

我从没使用过react，所以我可能还差得远，但是此文档表明error是布尔值-因此，如果将其设置为一点，则可能会将其解释为“ true”。

您可以使用myElement.setAttribute("myAttribute", "myValue")更改标准HTML元素上的属性。 如果此方法适用于react组件（不会混淆react），那么您可以仅在要设置为true时设置error属性，否则将其删除。 （如果react不希望您这样做，那么希望以上链接可以使您走上正确的轨道。）