javascript - 如何动态添加元素属性

Question

我正在开发reactjs应用程序，并且我一直致力于动态添加属性。

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

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

我想要 doSomethingfunction() 动态添加错误属性，如下

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

我面临的问题是，如果我保留错误属性，如上所示，错误消息甚至在用户输入电子邮件地址之前就会出现。我想到的解决方案是在发现该属性是否无效后添加该属性，但我不知道如何动态地执行此操作。

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