代码之家 › 专栏 › 技术社区 › Michael Emerson

React表单输入不允许我更改值

forms laravel reactjs

Michael Emerson · 技术社区 · 8 年前

在我的Laravel项目中,React类中有一个组件,它是一个简单的表单,只有一个输入字段。它包含了一个电话号码,我从数据库中检索到这个号码,然后作为道具通过减速器传回组件。使用这个,我将它作为一个道具传递给模块,然后用当前保存的值填充该字段:

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

我很确定它没有改变的原因是因为它是从不改变的状态预先加载的-但是如果我不能编辑字段,我怎么能让它注册一个改变?

编辑 :为了澄清,此表单中也有复选框供用户更改其首选项,并且为其检索的数据设置相同,但我可以选中并取消选中这些复选框

2 回复 | 直到 8 年前

Mayank Shukla 8 年前

变化:

1个- onChange 期望一个函数,而您正在分配一个值,这就是为什么,将console语句放在一个函数中,并将该函数传递给 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' />

Mohammad Rajabloo 8 年前

我认为最好的方法是当您从数据库中获取数据时,将其置于状态并将状态传递给输入,记住如果您想在键入时看到输入更改,请使用函数来处理更改,该函数应该更改状态值。