React 表单输入不会让我改变值

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

Answer 1

Changes:

1- onChange expect a function and you are assigning a value that's why, put the console statement inside a function and pass that function to OutOfOfficeContactNumberForm component , like this:

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

2- You are using controlled component (using the value property), so you need to update the value inside onChange function otherwise it will not allow you to change means input values will not be not reflect in ui.

Check example:

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

Answer 2

我认为最好的方法是当您从数据库中获取数据时将其放入状态并将状态传递给输入并记住是否要查看输入的输入更改，使用函数来处理更改并且该函数应该更改状态值。

Answer 3

class payloadcontainer extends Component {
     constructor(props) {
         super(props)     
         this.state = {
              number:1
         }
     }    

    render() {

        return (
            <div>
                <input value={this.state.number} onChange={(e)=>this.setState({number:e.target.value})}></input>
                <button onClick={()=>this.props.buyCake(this.state.number)}><h3>buy {this.state.number} cake </h3></button>
            </div>
        )
    }
}