Question

我是React.js的新手，试图构建表单验证。

有Btn组件。

const MyBtn = ({opts}) => {

   if(!opts) {
      opts = {};
   }

   return (
      <button {...opts}}>{opts.value}</button>
   )
}

有Home.js，这是一个登录页面。我不会添加您可能不需要的其他代码。

class Home extends Component {
    state = {
       formValid: false
    }

   regexCheck = {
       disabled : {this.state.formValid},
       value: "LogIn",
       type: "submit"
   }

   render(){
      return(
        <MyBtn opts={this.regexCheck}/>
      )
    }
}

//output that I'm trying to get
<button type="submit" disabled={this.state.formValid}>LogIn</button>

我收到一个错误，无法在道具中调用{this.state.formValid}。因为这是保留字。（对不起我的英语不好。）我觉得我完全错了。

无论如何，我认为我可以为此使用getDerivedStateFromProps方法...？所以我在Home.js中添加了它，但是没有用。

static getDerivedStateFromProps(nextProps, prevState){
    if(prevState.formValid !== nextProps.formValid){
        return { formValid: nextProps.formValid };
    }
    return null;
}

如您所见，我仍然对道具和状态感到困惑。啊，但是我还是要继续做这个项目。请给我任何解决方案。

Answer 1

这是无效的语法：

disabled : {this.state.formValid},

您只是想要：

disabled : this.state.formValid,

Reactjs在props数组中设置状态

1 个答案: