reactjs - React form input won't let me change value

Question

I have a component in a React class in my Laravel project which is a simple form with one input field. It houses a phone number which I have retrieved from the database and passed back through the reducer and into the component as a prop. Using this, I have passed it through to the module as a prop which then populates the field with the currently saved value:

<OutOfOfficeContactNumberForm
    show={props.showOutOfOffice}
    value={props.outOfOfficeNumber}
    handleChange={console.log("changed")}
/>

I have a handleChange on here which is supposed to fire a console log, but it only ever displays on page load. Here is my form module class:

class OutOfOfficeContactNumberForm extends React.Component {
    render() {
        const { show, value, handleChange } = this.props;

        if(!show) return null;

        return (
            <div>
                <p>
                    Please supply an Out of Office contact number to continue.
                </p>
                <InputGroup layout="inline">
                    <Label layout="inline" required={true}>Out of Office Contact Number</Label>
                    <Input onChange={handleChange} value={value} layout="inline" id="out-of-office-number" name="out_of_office_contact_number" />
                </InputGroup>
            </div>
        );
    }
}

export default (CSSModules(OutOfOfficeContactNumberForm, style));

The form is embedded in my parent component, as follows:

return (
    <SectionCategoriesSettingsForm
        isSubmitting={this.state.isSubmitting}
        page={this.props.page}
        show={this.props.show}
        categories={this.props.categories}
        submitSectionCategoriesSettings={this._submit.bind(this, 'add')}
        updateSelectedCategories={this._updateSelectedCategories.bind(this)}
        selectedCategoryIds={this.state.selectedCategoryIds}
        storedUserCategories={this.props.selectedCategories}
        outOfOfficeNumber={this.state.outOfOfficeNumber}
        onUpdateContactNumber={this._updateContactNumber.bind(this)}
    />
);

In my componentWillReceiveProps() function, I set the state as follows:

if (nextProps.selectedCategories && nextProps.selectedCategories.length > 0) {
    this.setState({
        outOfOfficeNumber: nextProps.outOfOfficeNumber,
        selectedCategoryIds: nextProps.selectedCategories.map(c => c.id)
    });
}

I'm pretty sure the reason it's not changing is because it's pre-loaded from the state which doesn't change - but if I cannot edit the field how can I get it to register a change?

EDIT: Just to clarify there are also checkboxes in this form for the user to change their preferences, and the data retrieved for them is set the same way but I am able to check and uncheck those no problem

标签： reactjslaravelforms

Answer 1

变化：

1- onChange期望一个函数并且您正在分配一个值，这就是为什么将控制台语句放在一个函数中并将该函数传递给OutOfOfficeContactNumberFormcomponent ，如下所示：

handleChange={() => console.log("changed")}

2-您正在使用受控组件（使用 value 属性），因此您需要更新 onChange 函数中的值，否则它将不允许您更改意味着输入值不会反映在 ui 中。

检查示例：

class App extends React.Component {
  
  state = {
    input1: '',
    input2: '',
  }
  
  onChange = (e) => this.setState({ input2: e.target.value })
  
  render() { 
    return(
      <div>
        Without updating value inside onChange 
        <input value={this.state.input1} onChange={console.log('value')} />
        <br />
        Updating value in onChange 
        <input value={this.state.input2} onChange={this.onChange} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />