CODEWITHSUNDEEP
javascriptreactjsecmascript-6
HarryTgerman
HarryTgerman

Reputation: 107

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>

Upvotes: 1

Views: 3955

Answers (2)

Alexander Elgin
Alexander Elgin

Reputation: 6956

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>

Upvotes: 1

simbathesailor
simbathesailor

Reputation: 3687

You any way have the access to the original value in this.props.someValue. And regarding the updated value you have this.state.name. You have both as far as i can understand

Upvotes: 0

Related Questions