调用生成按钮的函数答案

【问题标题】：Calling a function for a generate button调用生成按钮的函数
【发布时间】：2018-04-17 15:12:06
【问题描述】：

我有一个页面，用户可以在其中搜索给定条件的数据库，然后通过另一个按钮返回数据，用户可以使用该按钮将信息添加回数据库。但是，每当我单击第二个按钮时，页面就会重新加载。我连console.log 都进不去。我是新手，需要任何帮助。

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;

【问题讨论】：

标签： reactjs firebase button

【解决方案1】：

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

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

希望它有效！

【讨论】：

【解决方案2】：

我可以看到几件事，youre even.preventDefault() 应该在页面顶部，你说它正在重新加载，所以这是不需要的行为。其次，您应该在 then 内设置状态，一般来说，根据我的经验，这是行不通的 - 我相信由于 setState 是异步的或类似性质的东西。

我会像这样重写你的提交

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

您的“messageSubmit()”不是控制台日志记录的原因也可能是因为您使用的是提交处理程序而不是单击处理程序，因此每次单击时都会重新加载页面。

干杯

【讨论】：

搞清楚了吗？