无法从表单提交调用 redux 操作

Question

当我尝试提交搜索表单时，它不会调用搜索操作。 是因为我将搜索功能从一个组件传递到另一个组件时效率低下吗？有没有办法直接从导入中使用它？

如果我将 SearchBox 组件包含在 Nav 本身中，它就可以工作。

如果我在handleSubmit 中添加console.log(search)，它会输出函数。

import { search } from './actions/userActions';

class Nav extends React.Component {
    render() {
        const { search, self } = this.props;

        return (
            self === null 
            ? <NavLoggedOut search={search} />
            : <NavLoggedIn search={search}
        )
     }
}

const NavLoggedOut = (props) => {
    .....
}

const NavLoggedIn = (props) => {
    return (
        <header>
            <SearchBox search={search} />
        </header> 
    )
}

class SearchBox extends React.Component {
    constructor() {
        super();  
        this.state = {
            name: ''
        }
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    handleSubmit = event => {
        event.preventDefault();
        this.props.search(JSON.stringify({name: this.state.name}))
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" id="name" onChange={this.handleChange} placeholder="Search" />
                <button type="submit">search</button>
            </form>
        )
    }
}

const mapStateToProps = state => ({
    self: state.store.self
});

export default connect(mapStateToProps, {search})(Nav);

Answer 1

尝试添加这几行

import { bindActionCreators } from 'redux';

...

function mapDispatchToProps(dispatch){
    return bindActionCreators({
       search
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Nav);

现在您的search 操作应该可以使用this.props.search() 对组件Nav 使用

如果需要参数，请记住传递参数（这取决于您如何编写 search 操作）

Answer 2

在你的构造函数中添加这个

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

和构造函数应该看起来像dis

constructor(props) {
        super(props);  
        this.state = {
            name: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }