使用初始文本值来响应表单输入

Question

I am using React Bootstrap input components and would like an initial value for the input component, but I cannot see how to do this. Using defaultValue does not put a physical text into the input component, which is what I am trying to do. How do I do this? Thanks in advance.

Here is my component:

    <InputGroup>
      <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        value = {this.state.name}
        onChange={(event)=>{
                    this.setState({
                       name:event.target.value
                    });
                 }}
        readOnly={ isReadOnly }
        defaultValue={this.state.name}     // ---> This is what should make the text read the pre-existing name

      />
    </InputGroup>

Answer 1

It gets its value from state.name so instead you should define default state on your component that holds the control.

For example in the constructor:

constructor(props: any) {
    super(props)

    this.state = {
        name: 'default value',
    }
}

If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle