Question

我想模块化一个大型组件，以便我可以重复使用它的一些部件。

两次都会呈现一个列表，我可以对其进行操作：更新我的模态状态以便关闭，然后通过服务器调用启动redux操作。

所以我想传递一个定义自定义行为的函数：

var handleSubmit = (name, description, author) => {

    if (inputsValidated(name, description)) {
        this.setState({ addingNewProject: false, errorMessage: '' });

        var payload = { name: name, date: new Date(), description: description, author: author},
            routeToPushAfter = `/app/users/${author._id || 'notsigned'}`,
            serverRoute = allRoutes.projectURL,
            type = 'project'

            this.props.postData(payload, routeToPushAfter, serverRoute, type);
    }

    else {
        this.setState({ errorMessage: 'Please fill out form' });
    }
}

然后将此函数传递给组件。

render() {
    return (
        <div style={main}>
            <DynamicList {...this.props} />
            <DynamicList {...this.props} handleSubmit={handleSubmit} handleDelete={handleDelete} />
        </div>
    );
}

问题是：this.setState绑定到父组件。我怎样才能传递一个可以修改本地状态的函数（不使用Redux）。

感谢您的任何输入！

Answer 1

您可以将函数绑定到DynamicList构造函数中的组件：

constructor(props) {
  super(props);
  if (this.props.handleSubmit) {
    this.handleSubmit = this.props.handleSubmit.bind(this);
  }
}

从作为props传递的函数调用setState

1 个答案: