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

小编典典

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

reactjs

我是React和REDUX的新手，我只是开发了一个简单的react应用程序，现在我遇到了一个问题，当我在组件中渲染输入元素时，如果我将元素设置为“值”，它将变为只读，但是如果我将其设置为重新设置状态时，“
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>
        );
    }
}

然后我发现是否通过添加onChange={(value) => this.onChange(value)}输入元素而对此做出错误
，它可以正常工作（它在props或state更新时更新，并且我可以重新输入值），但是我认为这不是正确的解决方案，因为它会导致我的浏览器控制台出现错误。这是因为“
this.onChange”功能不存在。

请帮助我解决这个问题，并在此先感谢

问候，

维迪

阅读 222

2020-07-22

共1个答案

小编典典

您输入不工作的原因是因为你需要define的onChange功能，这实际上sets the state与更新后的值。您可能可以内联进行，因为它只需要声明

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

但是我建议您使用一种onChange方法，因为您可以同时处理多个输入，而且看起来更干净

class EditForm extends React.Component {



    constructor() {

        super();

        this.state = {



        }

    }

    onChange(e) {

         this.setState({[e.target.name]: e.target.value})

    }

    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() {



        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={this.state.amount} onChange={(value) => this.onChange(value)} className="form-control"

                               id="amount" name="amount" type="number"

                               ref="amount"/>

                         <input value={this.state.amount1} onChange={(value) => this.onChange(value)} className="form-control"

                               id="amount1" name="amount1" type="number"

                               ref="amount"/>

                    </div>

                    <br/>

                    <br/>

                    <input className="btn btn-info" type="submit" value="submit"/>

                </form>

            </div>

        );

    }

}



ReactDOM.render(<EditForm/>, document.getElementById('app'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

<div id="app"></div>

2020-07-22