React Js，onChange {setState} 事件不起作用

Question

I'm working my practice app using ReactJs and Django. My problem is when I update the Data via Axios "onChange" event not working.

updateForm.js

class Contact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Name: '',
            Contact: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleformsubmit = this.handleformsubmit.bind(this);
    }

    handleformsubmit = (event, requestType, id) => {
        const Name = event.target.elements.Name.value;
        const Contact = event.target.elements.Contact.value;

        switch (requestType) {
            case 'put':
                return axios.put(`http://127.0.0.1:8000/Contact/${id}/`, {
                    Name: Name,
                    Contact: Contact

                })
                    .then(res => console.log(res))
                    .catch(error => console.log(error));
        }
    }

    handleChange(event) {
        this.setState({ Name: event.target.value });
        this.setState({ Contact: event.target.value });

    }


    render() {
          const Name = this.state.Item_no;
          const Contact = this.state.Supplier;
        return (
            <Form onSubmit={(event) => this.handleformsubmit(
                event,
                this.props.requestType,
                this.props.id)}>
                <div className="container">
                        <GridContainer component="span">
                            <Card>
                                <CardHeader color="primary">
                                    <h4>Update Contact Info</h4>
                                </CardHeader>
                                <CardBody>
                                    <GridContainer>
                                        <GridItem sm={12} md={6}>
                                            <CustomInput
                                                labelText="Name"
                                                type="text"
                                                id="Name"
                                                name="Name"
                                                formControlProps={{
                                                    fullWidth: true
                                                }}
                                                value={Name}
                                                onChange={this.handleChange}
                                            />
                                        </GridItem>
                                        <GridItem sm={12} md={6}>
                                            <CustomInput
                                                labelText="Contact"
                                                name="Contact"
                                                type="text"
                                                id="Contact"
                                                formControlProps={{
                                                    fullWidth: true
                                                }}

                                                value={Contact}
                                                onChange={this.handleChange}
                                            />
                                        </GridItem>

I already done searching and tried the possible solution's but nothing works. Nothing wrong with "put" actions but on my onChange event not trigger when I update the data. Help me how to work this.Thank you!

Answer 1

从您的代码中，我可以看到onChange函数只是更新新状态，并且只有在您提交表单之前才会调用函数handleformsubmit

Answer 2

It looks like your input value is controlled, which refuses any changes from handleChange

Try value={this.state.Name}