如何读取按键值字段它被点击react.js时

Question

我已经定义了一个在我的应用程序被称为“过滤器”的状态。的状态下在父类中定义。有迹象表明，已经使用不同的值定义的四个按钮。

<button class="w-25 btn menu-btn" value='inbox' onClick={this.props.filterData}>Inbox</button>
<button class="w-25 btn menu-btn" value='rejected'  onClick={this.props.filterData}>Rejected</button>
<button class="w-25 btn menu-btn" value='accepted' onClick={this.props.filterData}>Accepted</button>
<button class="w-25 btn menu-btn" value='archive' onClick={this.props.filterData}>Archive</button>

我想根据该按钮被点击值来更新过滤状态值。

Answer 1

filterData(e) {
  this.setState({ foo: e.target.value })
}

Answer 2

在父组件，可实现一种道具filterData下向下传递给孩子一个功能

filterData(event) {
   this.setState({ filter: event.target.value }) // since the state has key filter in your parent
}

Answer 3

你可以通过值到母部件和设置状态存在。

View example。

它会是这个样子：

class ParentComponent extends React.Component{
    state: { filter: '' }

    handleClick = (data) => {
        this.setState({filter: data});
    }

    render() {
         return (
                <div className="col-sm-9" >
                    <childComponent onClick={this.handleClick}/> 
                </div>
        )
     }
}
class childComponent extends React.Component{

    render() {
         return (
                <div className="col-sm-9" >
                    <button class="w-25 btn menu-btn" value='inbox' onClick={this.props.onClick(filterData)}>Inbox</button>
<button class="w-25 btn menu-btn" value='rejected'  onClick={this.props.onClick(filterData)}>Rejected</button>
<button class="w-25 btn menu-btn" value='accepted' onClick={this.props.onClick(filterData)}>Accepted</button>
<button class="w-25 btn menu-btn" value='archive' onClick={this.props.onClick(filterData)}>Archive</button>

                </div>
        )
     }
}

这不是测试，但传达的理念。

Answer 4

<button class="w-25 btn menu-btn" value='inbox' onClick={this.filterData}>Inbox</button>


filterData = (event) => {

console.log(event.target.value);
}

您需要使用event.target.value获得按钮的值或者你可以传递参数，如下图所示。

<button class="w-25 btn menu-btn" value='inbox' onClick={() => this.filterData('inbox')}>Inbox</button>

filterData = (value) => {

    console.log(value);
    }