Question

我正在尝试使用ReactJS显示/隐藏不同的按钮以达到多视图选项的目的而且我被卡住了。

我正在根据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

的值显示/隐藏按钮

＆＃13;

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

＆＃13;

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

1 个答案: