为什么我不能更改 React 中的输入字段值？

Question

The current problem I am having is that after retrieving and setting the value, I am not able to edit the value in the input field after retrieving it. The value seems to be static and uneditable in the input field.

I want have to have flexibility to change the input field value even after retrieving the value.

Below is just a snippet of my code as to post the entire code is very large. I believe the problem lies inside the render() where i set the value={something} and handleInputChange .

Can someone tell me what is wrong with my code?

constructor(props) {
    super(props);

    this.state = {
        seedURL: '',
        response: null,
        error: null, 
        loading: false
    };
    this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange = (e) => {
    e.preventDefault();

    let name = e.target.name;
    let value = e.target.value;

    this.setState({
        [name]: value
    });
};



render() {
    const name = this.state.response ? this.state.response.data.name : "";
    const image = this.state.response ? this.state.response.data.image : "";

    return(
        <form>
            <input type="text" placeholder="Business Name" name="name" onChange={this.handleInputChange} value={name} />
            <input type="text" placeholder="Image URL" name="image" onChange={this.handleInputChange} value={image} />
        </form>
    );
}

Answer 1

name and image are not defined in the state of your component.

 this.state = {
        seedURL: '',
        response: null,
        error: null, 
        loading: false
    };

You could add them, eg

 this.state = {
        seedURL: '',
        response: null,
        error: null, 
        loading: false,
        image: '',
        name: ''
    };

But you will have to bind to this properties in the inputs like this:

<input type="text" placeholder="Business Name" name="name" onChange={this.handleInputChange} value={this.state.name} />

Alternatively, if you want to change the value of your response property of the state then you could use the spread operator to set the state of this object.

this.setState({
  ...this.state,
  response: {
    ...this.state.response,
    data: {
      ...this.state.response.data,
      [name]: e.target.value
    }
  }
})

Answer 2

That is because you're setting the value of input but that value is not changing when you type, to change those values you'll have to modify your setState() call to this:

this.setState({
  response: {
    ...this.state.response,
    data: {
      ...this.state.response.data,
      [name]: [value]
    }
  }
})

Hope this helps:)