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

您可以将值传递给父组件并在那里设置状态。

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 3

在父组件中，实现在prop filterData下传递给子代的函数

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

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

在react.js中单击时如何读取按钮中的值字段

4 个答案: