Question

我有一个页面，用户可以在该页面中搜索给定条件的数据库，然后使用另一个按钮返回数据，用户可以使用该按钮将信息添加回数据库。但是，每当我点击第二个按钮时，页面都会重新加载。我无法获得如此多的控制台。日志。我有新的反应，可以使用任何帮助。

import React , { Component } from 'react';
import { database } from '../firebase';



const byPropKey = (propertyName, value) => () => ({
    [propertyName]: value,
});

class Search extends Component{
    constructor(props) {
        super(props);
        this.state={
            users: null,
            searchCondition: "",
            friend: ""
        }
        // this.setState = this.setState.bind(this);
    }
    onSubmit = (event) => {
        let {
            searchCondition,
            friend
        } = this.state;
        database.searchConditions(searchCondition).then(snapshot => 
            this.setState(() => ({ users: snapshot.val() }))
        );

        event.preventDefault();
    }
    messageSubmit = (event) => {
        console.log("Click")
    }

    render(){
        let {
            users,
            searchCondition,
            friend
        } = this.state;
        return(
            <div>
                <h1>Search for conditions</h1>
                <form onSubmit={this.onSubmit}>
                    <div className="search">
                        <input
                        value={searchCondition}
                        onChange={event => this.setState(byPropKey('searchCondition', event.target.value))}
                        type="text"
                        placeholder="Condition to Search For"
                        />
                        <button className="friendButton"
                        onClick="x"
                        type="submit">
                            Search
                        </button>
                    </div>
                    </form>

                    {!!users && <UserList users={users} />}
            </div>
                )
            }
        }
        let UserList = ({ users, message }) =>
                    <div>
                            <h2>List of Usernames and Conditions of your Search</h2>
                            {Object.keys(users).map(key =>
                                <div key={key}>{users[key].username} : {users[key].condition}
                        <form>
                            <div className="search">
                                <input
                                    value={message} 
                                    onChange={console.log("test")}
                                    type="text"
                                    placeholder="Message for this User"
                                />
                                <button className="messageButton"
                                    onClick={console.log(message)}
                                    type="submit">
                                    Message
                        </button>
                            </div>
                        </form>
                    </div>
                            )}
                    </div>






export default Search;

Answer 1

您是否尝试将event.preventDefault（）放在事件处理程序的开头？

它应该在事件被触发时立即阻止默认行为。

希望它有效！

Answer 2

我可以看到一些事情，你甚至.preventDefault（）应该在页面的顶部，你说它正在重新加载，这是不必要的行为。第二，你应该在当时设置状态，一般来说，根据我的经验不起作用 - 我相信由于setState是异步的或者那种性质的东西。

我会像这样重写你的提交

onSubmit = (event) => {
    event.preventDefault();
    let {
        searchCondition,
        friend
    } = this.state;
    let value;
    database.searchConditions(searchCondition).then(snapshot => 
        value = snapshot.val
    );
    this.setState(() => ({ users: value) }))
}

也可能是你的＆＃34; messageSubmit（）＆＃34;不是控制台日志记录是因为您使用的是提交处理程序而不是单击处理程序，因此每次单击时您都在重新加载页面。

欢呼声

为生成按钮调用函数

2 个答案: