Question

当将onClick事件处理程序添加到菜单的列表项时，我有一个包含带有表单和onSubmit事件处理程序以及菜单列表的搜索组件的组件，整个页面停止呈现而没有任何错误。我注意到这与搜索栏组件中的表单冲突，用OnClick替换它有助于呈现页面。是否有理由无法以这种方式在同级对象上使用两个不同的事件处理程序？

    export default class Alphabet extends React.Component {
        constructor(props) {
            super(props);

            this.onClick = this.onClick.bind(this);
            this.onSubmit = this.onSubmit.bind(this);
        }

        onClick(event) {
            event.preventDefault();
            alert("clicked");
        }

        onSubmit(event) {
            event.preventDefault();
            alert("clicked");
        }


        render() {
            return (
                <div>
                    <div>
                        <span>Alphabet</span>
                    </div>
                    <div>
                        <SearchBar searchTerm="hi" onSubmit={this.onSubmit} />
                    </div>
                    <div>
                        <ul>
                            <li onClick={this.onClick}>
                                <span>Alerts</span>
                                <ul>
                                    <li>first alert</li>
                                </ul>
                            </li>
                            <li onClick={this.onClick}>
                                <span>Help</span>
                            </li>
                        </ul>
                    </div>
                </div>
            );
        }
    }


    export default class SearchBar extends React.Component {
        constructor(props) {
            super(props);
            const { searchTerm } = this.props;
            this.state = {
                searchTerm
            };

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

        search(event) {
            event.preventDefault();
            const { onSearchSubmit } = this.props;
            const { searchTerm } = this.state;
            onSearchSubmit(searchTerm);
        }

        render() {
            const { searchTerm } = this.state;

            return (
                <div id="searchBar" onClick={e => this.search(e)}>
                    <div className="searchBar">
                        <input
                            value={searchTerm}
                            onChange={this.onSearchTermChange}
                        />
                        <button type="submit" />
                    </div>
                </div>
            );
        }
    }

Answer 1

在您的代码中：

const { onSearchSubmit } = this.props;

但是您不会通过道具传递任何onSearchSubmit。

onChange={this.onSearchTermChange}

但是没有onSearchTermChange函数。

您没有发布整个代码吗？

this.state = { searchTerm };

您认为这是有效的语法吗？

此外，如果您已经在state中存储了值，则不应将其存储在props中：

    constructor(props) {
        super(props);

        // Doesn't look good!
        const { searchTerm } = this.props;
        this.state = {
            searchTerm
        };
    }

元素onClick处理程序与同级元素的表单onSubmit冲突

1 个答案: