使用ReactJS顯示/隱藏多個按鈕

Question

我試圖使用ReactJS顯示/隱藏不同的按鈕，以實現多視圖選項，但我被卡住了。

我正在基於user input的reactJS運行一些查詢。 我想讓用戶可以擁有同一查詢的多個視圖，並且我的想法是使用react-router並借助按鈕在頁面之間（作為視圖）進行導航。 到目前為止，我知道可以將用戶輸入保存為變量並與router一起使用，但是首先，我想知道如何在用戶提交輸入后創建按鈕。

我的想法是創建按鈕並將其隱藏，然后從調用Function中取消隱藏它。 但是我不知道如何更改其他按鈕的樣式，而不是單擊的樣式。

如果這不是一個好習慣，我如何從名為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中調用this.setState並利用Reacts 條件渲染來顯示/隱藏您的按鈕基於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> ) }