HTML-формы внутри reactJS

Question

Я использовал (почти) точный синтаксис для создания HTML формы в реакции:

var Hello = React.createClass({ 
    render: function() { 
     return 
     <div> 
      <section> 
      <form action="http://localhost:9203/ask"> 
       Text: <input type="text" name="text" value="Text"/> <br/> 
       Focus: <input type="text" name="focus" value="Focus"/> <br/><br/> 
       <input type="submit" value="Submit"/> 
      </form> 
      </section> 
     </div>; 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

https://jsfiddle.net/danyaljj/9xLa3eLp/

Проблема заключается в том, что в результате я не могу отредактировать формы. Любая идея, где я делаю это неправильно?

Answer 1

Вы должны использовать defaultValue, а не value.

Если вы используете значение, компонент становится controlled component, и значение не может быть изменено. Так как вам нужен uncontrolled component, и значение ввода должно быть редактируемым, вы должны использовать defaultValue.

<form action="http://localhost:9203/ask"> 
    Text: <input type="text" name="text" defaultValue="Text"/> <br/> 
    Focus: <input type="text" name="focus" defaultValue="Focus"/> <br/><br/> 
    <input type="submit" value="Submit"/> 
</form>