反应如何设置默认值

Question

Hello I'm new to react and redux. What I'm trying to do is have an edit page that gets the value from my server and puts it in an input value so the user can edit the value.

<FormGroup>
    <Label htmlFor="name">Name *</Label>
    <div className="controls">
        <InputGroup>
           <Input id="name" size="16" type="text" value={this.props.user.name} />
        </InputGroup>
    </div>
</FormGroup>

Inside a react component.

constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.componentWillMount = this.componentWillMount.bind(this)
}

componentWillMount(){
    // this will return my current user
    this.props.dispatch(fetchUser())
    console.log(this.props.user.name) //outputs 'John'
}

How can i insert the username inside the input. I tried using the id and all the traditional javascript ways but its not working.

Answer 1

It looks like used a react-bootstrap.
Below sample use defaultValue property. if you want to handle input value by

<FormControl
            type="text"
            autoFocus
            onBlur={this.handleMessage}
            defaultValue={this.props.user.name}
/>           

handlers...

handleMessage = (event) => {
  this.setState({
    userName: event.target.value,
  });
  // or do action
  // this.props.dispatch(notifyAction.changeUserName(event.target.value));
};