Altering react form but input value not editable

Question

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?

patrick · Accepted Answer · 2017-03-07 03:29:12Z

2

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.

answered Mar 7, 2017 at 3:29

patrick

10.3k4 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Altering react form but input value not editable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related