javascript - 除了 prevState 和 props 还向 setState 发送参数？

Question

我有一个组件调用在其父组件上定义的函数 addOption。该函数有一个来自表单字段的参数“选项”。addOption 函数接受参数并将其与 setState 中的一组选项连接起来。所有这一切都很好，但是，我真的希望 setState 在组件之外调用函数，以便可以对其进行测试并匹配类中的其他函数，但我不知道如何将“选项”参数传递给 setState .

class AddOption extends React.Component<IProps> {

onFormSubmit = (e: any) => {
    e.preventDefault();
    const option = e.target.elements.option.value.trim();
    const error = this.props.addOption(option);
}

render() {
    return (
        <div>
            <form onSubmit={this.onFormSubmit}>
                <input type="text" name="option" />
                <button>Add Option</button>
            </form>
        </div>
    );
}
}

家长

const deleteOptions = () => ({ options: [] as string[] })

class IndecisionApp extends React.Component<object, State> {
    readonly state: State = initialState;
    render() {
        const { title, subtitle, options } = this.state;
        return (
            <div>
                <Header title={title} subtitle={subtitle} />
                <Action
                    hasOptions={options.length > 0}
                    onClick={this.handlePickOption}
                />
                <Options
                    onClick={this.handleDeleteOptions}
                    options={options} />
                <AddOption
                    addOption={this.handleAddOption}
                />
            </div>
        );
    }

    handleDeleteOptions = () => this.setState(deleteOptions);
    handlePickOption = () => {
        const randomNum = Math.floor(this.state.options.length * Math.random());
        const option = this.state.options[randomNum];
        alert(option);
    }

    handleAddOption = (option: string) => {
        if (!option) {
            return "Enter a valid option";
        } else if (this.state.options.indexOf(option) > -1) {
            return "Enter a unique option";
        }

        this.setState((prevState: State) => {
            return {
                options: prevState.options.concat(option)
            }
        });
    }
}

我真的想让handleAddOption 更类似于deleteOption，它在IndecisionApp 组件之外声明，但我不知道如何将'option' 从handleAddOption 传递给setState。

GitHub - index.tsx

标签： javascriptreactjstypescript

Answer 1

我想到了。

组件内部

handleAddOption = (option: string) => {
    if (!option) {
        return "Enter a valid option";
    } else if (this.state.options.indexOf(option) > -1) {
        return "Enter a unique option";
    }

    this.setState(prevState => appOption(prevState, option));
}

组件外。

const appOption = (prevState: State, option: string) => {
    return {
        options: prevState.options.concat(option)
    }
}