Question

您好，有人可以告诉我如何使用道具的值编辑输入字段，但不删除该值，只是更新它？

 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 1

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

Answer 2

您无论如何都可以访问this.props.someValue中的原始值。关于更新的值，您有this.state.name。你可以理解

Reactjs如何使用props的值编辑输入值？

2 个答案: