Question

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

我很确定不更改的原因是因为它是从不会更改的状态预加载的-但是如果我不能编辑该字段，该如何注册更改？

编辑：只是为了澄清这种形式的用户也可以使用复选框来更改其首选项，并且为他们检索的数据以相同的方式设置，但是我可以选中和取消选中这些复选框没问题

Answer 1

更改：

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

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

反应形式输入不会让我改变价值

3 个答案: