Javascript 反应输入元素：值与默认值

我是React和REDUX的新手，我刚刚开发了一个简单的React应用程序，现在我面临一个问题，当我在组件中呈现一个输入元素时，如果我将元素设置为“value”，它将成为只读的，但是如果我将值设置为“defaultValue”，它将在我重新更新状态时不再更新

这是我的密码：

    import React from "react";
    export default class EditForm extends React.Component {

    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
        var {amount}=this.props.transaction;
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

从“React”导入React；
导出默认类EditForm扩展React.Component{
编辑事务（事件）{
var事务=this.props.transaction；
event.preventDefault（）；
var NewTransaction={
交易记录和数据：{
金额：this.refs.amount.value
}
}
this.props.editTransaction（NewTransaction，transaction.id）；
}
closeForm（）{
this.props.closeForm（）；
}
render（）{
var{amount}=this.props.transaction；
返回(


编辑事务
关闭
数量
this.onChange（value）}className=“表单控件”
id=“amount”name=“amount”type=“number”
ref=“金额”/>




);
}
}

然后我通过添加

onChange={（value）=>this.onChange（value）}

在我的输入元素上，它工作正常（它在道具或状态更新时更新，我可以重新键入值），但我认为这不是一个合适的解决方案，因为它会在我的浏览器控制台上导致错误。这是因为“this.onChange”函数不存在

请帮我解决这个问题，谢谢

问候,

---

Vidy

如果您使用的是redux，那么您需要定义一个onChange方法，该方法可能是一个通过reducer更新组件状态的操作。下面显示了在es6中使用简单状态的一种更简单的方法。此外，您还可以通过

ref

从输入字段中获取值，这是Facebook不鼓励的。这也会给您一个错误，因为您试图控制和不受控制的组件

请参阅表格文档以供进一步阅读

class Foo extends React.Component { 
  constructor(props) {
    super(props);
    this.state = ({
      inputVal: '',
    });
  }
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.inputVal);
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.inputVal} onChange={this.onChange} />
      </div>
    );
  }
}

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state=({
输入值：“”，
});
}
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
}
handleSubmit=（事件）=>{
event.preventDefault（）；
console.log（this.state.inputVal）；
}
render（）{
返回(
);
}
}

输入不起作用的原因是，您需要定义

onChange

函数，该函数实际

使用更新的值设置状态。您可能可以内联执行，因为它只需要像

<input type="text" value={this.state.inputVal} onChange={(e) => {this.setState({inputVal: e.target.value})}} />

我对此进行了修补，找到了一个非常简单的解决方案：

class App extends Component {

constructor(props) {
    super(props)
    this.enterText = this.enterText.bind(this)
    this.state = {
        userNameText: 'user name',
        pswdText: 'pswd',
        textEntry: false
    }
}

async enterText() {
    if (!this.state.textEntry) {
        await this.clearText()
        this.setState({textEntry: true})
    }
}

clearText() {
    this.setState({
        userNameText: '',
        pswdText: ''
    })
}

render() {
    return (
        <div className="App">
            <div className="App-header">
                <h1 className="App-title">
                    Welcome
                </h1>
            </div>
            <div className="login-fields">
                <LoginFields userNameText={this.state.userNameText} pswdText={this.state.pswdText} onFocus={this.enterText} />
            </div>
        </div>
    )
}
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.enterText=this.enterText.bind（this）
此.state={
userNameText:'用户名'，
pswdText:'pswd'，
textEntry:false
}
}
异步enterText（）{
如果（！this.state.textEntry）{
等待这个
this.setState（{textEntry:true}）
}
}
明文（）{
这是我的国家({
userNameText:“”，
pswdText:“”
})
}
render（）{
返回(
欢迎
)
}
}

因此，在初始化render（）时，字段的状态是构造函数中硬编码的状态。当用户单击“名称”或“pswd”框（这两个框可以很容易地分开）时，这两个框都会用clearText（）清除，然后用allowText（）设置为null。设置为null后，将接受用户输入文本

确保LoginFields组件在输入中包含以下内容：

onFocus={this.props.onFocus}
React将输入视为受控（值与prop/state绑定）或非受控（值不绑定）。我非常推荐你把这本书读几遍，因为一开始可能会让人困惑。您在控制台中提到了错误，您能用它们的详细信息更新您的问题吗？谢谢您的快速回复，如果我不想在这个组件中设置状态怎么办？因为我使用的是REDUX，所以所有状态都在我的reducer中，它加载在我的index.js（调用这个EditForm组件的js文件）上。这就是为什么我从props中加载了这个值，是否有任何解决方案可以调用内联函数返回类似错误的行为，但不能在浏览器控制台中捕获为错误？非常感谢您hredux的最佳实践是将ui状态设置为本地状态，而不是redux存储。但是，如果您想使用redux存储，那么可以在onChange函数中调度一个操作，我在其中设置状态，该操作将调用reducer来更改状态。问我你是否面临任何问题如果我有取消选项，你会如何将其重置为原始值？@SaifAliKhan By reset是指你所做的任何更改都会恢复它们吗back@ShubhamKhatri对我在第一次设置值时遇到了这个问题，现在我通过setState on onChange函数更改该值。现在我还可以选择取消。如何获取最初设置为“取消”的值？因为它是用新值更新的？谢谢您的快速回复，如果我不想在这个组件中设置状态怎么办？因为我使用的是REDUX，所以所有状态都在我的reducer中，它加载在我的index.js（调用这个EditForm组件的js文件）上。这就是为什么我从props加载了这个值，有什么解决方案可以调用内联函数return吗