Altering react form but input value not editable

问题:

I came from angularjs background, with 2 way binding I don't have to worry much, just declare a submit function, I can get the changed or unchanged value.

I'm stuck with react now. My input is not editable.

class HelloWorldComponent extends React.Component {

  constructor(){
    super();

    this.handleChange = this.handleChange.bind(this)
  }

  render() {
    const person = {"name":"james"};
    return (      
      <input onChange={this.handleChange} type="text" placeholder="name" value={person.name} />      
    );
  }

  handleChange(e){

  }
}

React.render(
  <HelloWorldComponent />, document.getElementById('react_example')
);

http://jsbin.com/huluqifanu/1/edit?js,console,output

Also what to do next? should I set the api data to a state first?

回答1:

If you do not want to use Controlled Components then you can use Uncontrolled Components.

Specifically, you can use the defaultValue prop instead of value on your input.

As to your second question, you will have to be more clear what you are asking or perhaps better to ask in a separate Q altogether.