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

Question

I'm trying to show/hide different buttons with ReactJS for the purpose of multiple view option and I'm stuck.

I'm running some queries based on user input with reactJS . I want to make it possible for the user to have multiple views of the same query and for that my Idea was to use react-router and navigate between pages ( as views ) with the help of buttons. So far I understood that it's possible to save the user input into variable and use it with the router , but first I wanted to know how to create buttons after the user submits his input.

My Idea was to create the button and hide it and then unhide it from the call Function. But I don't know how can I change the style of other button not the that that was clicked.

If this isn't good practice how can I create new button from within the function that is called onSubmit ?

My Code:

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

I'm thinking you are wanting to show the See result as abcd Button after you have submitted your Form... If so - you may want to call this.setState in your handleSubmit and make use of Reacts conditional rendering To show/hide your button based on the value of 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> ) }