javascript - 使用 ReactJS 显示/隐藏多个按钮

Question

为了多 View 选项，我试图用 ReactJS 显示/隐藏不同的按钮，但我被卡住了。

我正在使用 reactJS 运行一些基于用户输入 的查询。我想让用户对同一个查询有多个 View ，为此我的想法是使用 react-router 并借助按钮在页面(作为 View )之间导航。到目前为止，我了解到可以将用户输入保存到变量中并将其与 router 一起使用，但首先我想知道如何在用户提交输入后创建按钮。

我的想法是创建按钮并隐藏它，然后从调用函数中取消隐藏它。但是我不知道如何更改其他按钮的样式而不是单击的按钮。

如果这不是一个好习惯，我该如何从名为 onSubmit 的函数中创建新按钮？

我的代码:

handleSubmit(event) {
event.preventDefault();
const nBtn = this.otherBtn.value;

//hidden to false -- how ?


//run query
}

 render() {
return(
<form onSubmit={this.handleSubmit}>
   <FormGroup>
   <FormControl type="text" placeholder="Search for xy" inputRef={(ref) => {this.xy= ref}}  />
   </FormGroup>
   <Button className="searchXY" type="submit" bsStyle="success">Search</Button>
   </form>
   <br />
   <Button className="btnRouter" id='testBtn' type="submit" bsStyle="danger" hiden={true} inputRef={(ref) => {this.otherBtn= ref}}  >See results as abcd </Button>
  );
}

Answer 1

我想你想在提交表单后显示 See result as abcd 按钮...如果是这样 - 你可能想调用 this.setState 在你的 handleSubmit 中使用 Reacts conditional rendering根据 this.state.showButton

的值显示/隐藏按钮

constructor (props) {
  super(props)
  this.state = { showbutton: false }
  this.handleSubmit = this.handleSubmit.bind(this)
}

handleSubmit () {
  this.setState({ showButton: true })
}

render () {
  return (
    <div>
      <form onSubmit={ this.handleSubmit }>
        <input type="text" />
        <button type="submit" />
      </form>
      {this.state.showButton ? <button>See as abcd</button> : null}
    </div>
  )
}