CODEWITHSUNDEEP
javascriptreactjs
NY2010
NY2010

Reputation: 1

Submit form on radio button select in React

I currently have several radio button forms which are submitting data to my backend nicely when i hit the return key. However I want each form to submit and move to the next component/form as soon as a radio button is selected. Is there a way to submit a form and move to the next component on radio button selection? Can onselect be used here, and if so how do i go about using it?

Here's my code: 

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>

Upvotes: 0

Views: 422

Answers (2)

Arun Kumar
Arun Kumar

Reputation: 355

Either you can do conditional rendering, by rendering the specific component on after successfull setState, for that you have to create the components you needed and you can use the props call back to set the data in the parent. Or you can keep an iterartor and do multiple returns inside the same component.

Upvotes: 0

thinparfiet
thinparfiet

Reputation: 108

call your handleSubmit function from the handleChange function

for example in the `handleChange function that is called every time a radio button is selected

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);
    }

you can use onselect but since you already have a onchange here it would be more efficient to use that!

Upvotes: 1

Related Questions