Show/Hide ReactJS 的多个按钮

Question

我正在尝试使用 ReactJS show/hide 不同的按钮来实现多视图选项，但我卡住了。

我运行一些基于 user input 和 reactJS 的查询。我想让用户对同一个查询有多个视图，为此我的想法是使用 react-router 并借助按钮在页面（作为视图）之间导航。到目前为止，我了解到可以将用户输入保存到变量中并将其与 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 按钮...如果是这样 - 你可能想在 handleSubmit 中调用 this.setState 并利用Reacts conditional rendering根据this.state.showButton

的值show/hide你的按钮

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

Show/Hide ReactJS 的多个按钮

Show/Hide multiple buttons with ReactJS

javascript

router

reactjs