Question

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

如果要在Nav本身中包含SearchBox组件，它将起作用。

如果我在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操作应该对使用Nav的组件this.props.search()可用

请记住如果需要传递参数（这取决于您编写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);
    }

无法通过表单提交调用redux操作

2 个答案: