HarryTgerman HarryTgerman - 8 months ago 163
React JSX Question

Reactjs how to edit Input Value with value of props?

Hello can someone please tell me how i edit an Input field with the value of props but don't delete the value, just update it?

constructor(props){
super(props);
this.state={
name: this.props.someValue}
}

handleChange = (e) => {
this.setState({name: e.target.value});
}

<From>
<input type="text" value={this.state.name} onChange={this.handleChange}/>
<button type='submit'>Speichern</button>
</Form>

Answer Source

class App extends React.Component{
  render() {
    return (
       <EditDefault defaulValue="default" />
    );
  }
}

class EditDefault extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.defaulValue};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={this.handleChange}/>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download