How to pass Value from a <select> in javascript-CodePudding

I am trying to pass the selected value of a <select> in the onChange function. I have tried this SO Question, but this and this.value don't work. I know the question is kinda old...

setShippingMethod(obj) {
    console.log('Shipping method '   JSON.stringify(obj));
    this.state.defaultMethod = obj.value;
    this.props.setShippingMethod(obj.value);
}

render() {
    const shippingMethods = this.state.shippingMethods;
    const defaultMethod = this.state.defaultMethod;        

    return (
        <aside id="checkout" className="block col-1">
            <h1>Shipping</h1>
            <div className="row">
                <select id="comboMethod" onChange={setShippingMethod(this)} value={!!defaultMethod ? null : defaultMethod.trim()}>
                    {shippingMethods.map(method => { return <option key={method.shipmthd.trim()} value={method.shipmthd.trim()}>{method.shipmthd.trim()}</option>} )}
                </select>
            </div>
        </aside>
    );
}

My line console.log('Shipping method ' JSON.stringify(obj)) generates an error "Uncaught TypeError: cyclic object value" and the message seems to be this still refers to the entire (in my case) modal. Is there a newer way to do this? Any help will be appreciated.

CodePudding user response：

When using events Listeners in react, you get an event object. Their You can access the value that entered to the element with e.target.value.

setShippingMethod(e) {
    console.log('Shipping method '   JSON.stringify(e.target.value));
    //...rest of the code
}

render() {
    const shippingMethods = this.state.shippingMethods;
    const defaultMethod = this.state.defaultMethod;        

    return (
        <aside id="checkout" className="block col-1">
            <h1>Shipping</h1>
            <div className="row">
                <select id="comboMethod" onChange={setShippingMethod} value={!!defaultMethod ? null : defaultMethod.trim()}>
                    {shippingMethods.map(method => { return <option key={method.shipmthd.trim()} value={method.shipmthd.trim()}>{method.shipmthd.trim()}</option>} )}
                </select>
            </div>
        </aside>
    );
}

CodePudding user response：

this is always going to be a reference to the class while you are in class. if you want to pass the selected option value you need something like

onChange={(e) => {setShippingMethod(e.target.value)}}