React 表單輸入不會讓我改變值

Question

我在 Laravel 項目的 React 類中有一個組件，它是一個帶有一個輸入字段的簡單表單。 它包含一個我從數據庫中檢索到的電話號碼，並通過減速器傳回並作為道具傳遞到組件中。 使用這個，我將它作為一個 prop 傳遞給模塊，然后用當前保存的值填充該字段：

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

我在這里有一個handleChange應該觸發控制台日志，但它只在頁面加載時顯示。 這是我的表單模塊類：

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

表單嵌入在我的父組件中，如下所示：

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)}
    />
);

在我的componentWillReceiveProps()函數中，我將狀態設置如下：

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

我很確定它沒有改變的原因是因為它是從不變的狀態預加載的 - 但是如果我無法編輯該字段，我怎樣才能讓它注冊更改？

編輯：只是為了澄清此表單中還有復選框供用戶更改他們的首選項，並且為他們檢索的數據設置相同，但我可以檢查和取消選中那些沒問題

Answer 1

變化：

1- onChange期望一個函數並且您正在分配一個值，這就是為什么，將控制台語句放在函數中並將該函數傳遞給OutOfOfficeContactNumberForm組件，如下所示：

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

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