Reactjs 反应表单输入赢得'；不要让我改变价值观

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

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

该表单嵌入到我的父组件中，如下所示：

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

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

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

---

编辑：只是为了澄清一下，此表单中还有一些复选框供用户更改他们的首选项，并且为他们检索的数据的设置方式相同，但我可以选中并取消选中那些没有问题的更改：

1-

onChange

需要一个函数，并且您正在分配一个值。这就是为什么，将console语句放在函数中，并将该函数传递给

OutOfOfficeContactNumberForm

组件，如下所示：

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

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

检查示例：

类应用程序扩展了React.Component{
状态={
输入1:“”，
输入2:“”，
}
onChange=（e）=>this.setState（{input2:e.target.value}）
render（）{
返回(
不更新onChange中的值


更新onChange中的值
)
}
}
ReactDOM.render（，document.getElementById（'app'））

---

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

类payloadcontainer扩展组件{
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>
        )
    }
}

建造师（道具）{
超级（道具）
此.state={
编号：1
}
}    
render（）{
返回(
this.setState（{number:e.target.value}）}>
this.props.buyCake（this.state.number）}>buy{this.state.number}蛋糕
)
}
}

输入上已经有一个onChange属性，但尽管我理解您的示例，但我需要通过value prop来获取字段的实际值，这意味着这个示例不会真正起作用…使用该示例来演示，即使您将onChange属性指定给输入元素，并且不更改其中的值，该字段也将不可编辑。所以，如果您使用的是value属性，那么使用onChange并更新其中的值：）检查更新的答案，为onChange分配一个值，如果我在解释中遗漏了什么，请告诉我：）我明白了-谢谢。我目前正试图将值prop分配给组件中的一个新状态（正如您对状态“input2”所做的那样），但由于状态的性质，它没有在渲染之前及时设置，因此我需要继续处理它……您能添加一些解释吗？

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