javascript - 在 React 中选择单选按钮提交表单

Question

我目前有几个单选按钮表单，当我按回车键时，它们可以很好地向我的后端提交数据。但是，我希望在选择单选按钮后立即提交每个表单并移至下一个组件/表单。有没有办法提交表单并移动到单选按钮选择的下一个组件？这里可以使用 onselect 吗？如果可以，我该如何使用它？

这是我的代码:

export class ChoiceOne extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null
        };

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

    handleChange = (e) => {
        const colourType = e.target.value;
        this.setState({
            colourType
        });
    };


    handleSubmit(event) {
        event.preventDefault();

        const typeOneItem = {
            time: new Date().toLocaleString("en-gb"),
            typeOne: this.state.colourType
        };
        firebase.writeTo(`${firebase.getCurrentUser().uid}/typeOne`, typeOneItem);
        this.props.onChosen(1);
    }

    render() {
            const colour = ['Red', 'Blue', 'Green'];
            return (

                    <
                    div className = "type1" >
                    <
                    div className = "content" >
                    <
                    form onSubmit = {
                        this.handleSubmit
                    } >

                    {
                        colour.map((colour, index) =>
                            <
                            label key = {
                                index
                            } > {
                                colour
                            } <
                            input value = {
                                colour.toUpperCase()
                            }
                            checked = {
                                this.state.colourType === colour.toUpperCase()
                            }
                            onChange = {
                                this.handleChange
                            }
                            type = "radio" / >
                            <
                            /label>
                        )
                    } <
                    input type = "submit"
                    hidden / >
                    <
                    /form> < /
                    div > <
                    /div>

Answer 1

从 handleChange 函数调用 handleSubmit 函数

例如，在每次选择单选按钮时调用的“handleChange”函数中

handleChange = (e) => {
        const colourType = e.target.value;
        this.setState({
            colourType
        });

        if(//check if you are ready to submit) {
            this.handleSubmit();
            e.preventDefault();
        }
    };

handleSubmit() {
        const typeOneItem = {
            time: new Date().toLocaleString("en-gb"),
            typeOne: this.state.colourType
        };
        firebase.writeTo(`${firebase.getCurrentUser().uid}/typeOne`, typeOneItem);
        this.props.onChosen(1);
    }

你可以使用onselect，但由于你已经有一个onchange，所以使用它会更有效!