onClick：从 componentDidMount 调用 function

Question

I have a form like this:

<form id="sendSms">
            <h1  className="distance">signup</h1>
            <input className="text-right" onClick={ostype} id="input1" name="mobileNumber" pattern="[0-9]+" type="text" placeholder="mobile" required />
            <input name="osVersion" id="input2" type="hidden" value="" />
            <input name="osType" id="input3" type="hidden" value="" />
            <input name="deviceID" id="input4" type="hidden" value="Come on" />

            <button className="distance" type="submit" onClick={sendData}>submit</button>
        </form>

I want to sendData function POST the inputs to api

the function:

  function sendData() {
    axios({
        method: 'post',
        url: 'some api i have',
        data: sendSms,
    })

    .then(res => this.setState({ recipes: res.data }));

}

var sendSms = 
{
    'mobileNumber' : document.getElementById("input1"),
    'osVersion' : document.getElementById("input2"),
    'osType' : document.getElementById("input3"),
    'deviceID' : document.getElementById("input4"),
}

I tried to put axios in componentDidMount() but that way i cant call the sendData functuion with onClick. and when i put the function in my code, i get NS_BINDING_ABORTED

Answer 1

Try something like this:

// Using Hooks
export default function SMSView() {
    const [state, setState] = useState({
        mobileNumber: '',
        osVersion: '',
        osType: '',
        deviceID: ''
    })

    const handleChange = ({target: {value, name}}) => {
        setState({...state, [name]: value})
    }

    const handleSubmit = e => {
        e.preventDefault()

        // axios here
    }

    return <form onSubmit={handleSubmit}>
        <input name="mobileNumber" value={state.mobileNumber} onChange={handleChange}/>
        <input name="osVersion" value={state.osVersion} onChange={handleChange}/>
        <input name="osType" value={state.osType} onChange={handleChange}/>
        <input name="deviceID" value={state.deviceID} onChange={handleChange}/>
        <button type="submit">Submit</button>
    </form>
}

// Using Class Component
export default class SMSView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mobileNumber: '',
            osVersion: '',
            osType: '',
            deviceID: ''
        }
    }

    handleChange = ({target: {value, name}}) => {
        this.setState({...this.state, [name]: value})
    }

    handleSubmit = e => {
        e.preventDefault()

        // axios here
    }

    render() {
        const {mobileNumber, osVersion, osType, deviceID} = this.state
        return <form onSubmit={this.handleSubmit}>
            <input name="mobileNumber" value={mobileNumber} onChange={this.handleChange}/>
            <input name="osVersion" value={osVersion} onChange={this.handleChange}/>
            <input name="osType" value={osType} onChange={this.handleChange}/>
            <input name="deviceID" value={deviceID} onChange={this.handleChange}/>
            <button type="submit">Submit</button>
        </form>
    }
}

or use libraries like [React Hook Form][1]

[1]: https://react-hook-form.com/

Answer 2

You have mixed two worlds in your code: In the below code(that you have written) to get the Values from the inputs, The approach is Imperative but still it is wrong, You are not assigning any value but directly assigning DOM elements to your sendSms object.

var sendSms = 
{
    'mobileNumber' : document.getElementById("input1"),
    'osVersion' : document.getElementById("input2"),
    'osType' : document.getElementById("input3"),
    'deviceID' : document.getElementById("input4"),
}

You should use a Controlled Component Approach instead to get values of your inputs.

Secondly, There should not be any error at all if you use onClick the way you have, You do not need to use ComponentDidMount at all.

You simply should check two things,before sending your data via Post Axios request.

1. Whether I have the available data from inputs.
2. Whether server is allowing for Post call.

So, you need to do some homework dear Friend, Let me share some resources.

From Official React Docs Controlled Forms

Making post call (on Form submit exactly what you require) https://reactgo.com/react-post-request-axios/

Please Note: Though Class based approach will work but from React 16.8, React is officially using React Hooks, do have a look into that as well https://reactjs.org/docs/hooks-intro.html

Answer 3

For onClick event you must to do like this:

onClick={() => sendData()}

After I advise you to use Function components instead of Class components and use Hook instead directly use state and lifecycle fonction.