Question

我为这个简单的问题道歉，我有新的反应，我还没有找到解决这个问题的方法。点击后，我试图检索每个按钮的值。该值重复返回为undefined。我究竟做错了什么？非常感谢你的帮助！

    class BottomListFilter extends Component {
    constructor(props) {
        super(props);

        this.handleButton = this.handleButton.bind(this);
    }

    handleButton = (evt) => {
      console.log(evt.target.value);  
    };

    render() {
        const listFilter = this.props.initialAdvisorList.map((filter) => 
            <li key={filter.id}>
                <a href="#">{filter.location}</a>
            </li>
        );
        return(
            <div>
                <div>
                    <button  
                    value='location'
                    onClick={this.handleButton}
                    >
                        <h2>Choose by location</h2>
                    </button>
                    <button
                    value='state'
                    onClick={this.handleButton}
                    >
                        <h2>Choose by state</h2>
                    </button>
                    <button
                    value='practice'
                    onClick={this.handleButton}
                    >
                        <h2>Choose by practice</h2>
                    </button>
                    <button
                    value='topic'
                    onClick={this.handleButton}
                    >
                        <h2>Choose by topic</h2>
                    </button>
                </div>
                <div>
                    <ul>
                        {listFilter}
                    </ul>
                </div>
            </div>

        );
    }
}

Answer 1

你当然可以做evt.target.parentNode.value，在这种情况下它会起作用。它可能只是我，但我找到了反对React精神的解决方案，因为它回顾了遍历DOM（JQuery日）。

将值传递给handleButton函数更清晰，更灵活：

<button onClick={this.handleButton.bind(null, 'location')}>
    <h2>Choose by location</h2>
</button>

现在你的handleButton看起来像这样：

handleButton(value, event) {
    console.log(value);
    console.log(event);
}

在这种情况下，你不再需要“event”了，你可以很容易地做handleButton（值），但为了清楚起见，我已将它包括在内。

Answer 2

您可以简化handleButton情况。它不需要是一种方法。（在下面的代码中，我也删除了ul，只是为了隔离问题。）

但是，我不认为这是导致问题的原因。最有可能的是，问题不是React问题，只是一个简单的DOM问题。 event.target表示“发生事件的最低级别节点”。如果您点击了h2，则该节点为h2，其中没有value属性。

只是不要使用h2。将文本直接放在按钮内。也显示在代码示例中。

var handleButton = evt => {
      console.log(evt.target.value)  
    }

class BottomListFilter extends Component {
    constructor(props) {
        super(props);

        this.handleButton = this.handleButton.bind(this);
    }

    render() {
        return(
        <div>
            <button  
            value='location'
            onClick={handleButton}
            >
                Choose by location
            </button>
            <button
            value='state'
            onClick={handleButton}
            >
                Choose by state
            </button>
            <button
            value='practice'
            onClick={handleButton}
            >
                Choose by practice
            </button>
            <button
            value='topic'
            onClick={handleButton}
            >
                Choose by topic
            </button>
          </div>

        );
    }
}

按钮值传递为undefined

2 个答案: