React 输入元素：值与默认值

Question

我是 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)} 来解决这个问题，它工作正常（它在道具或状态更新时更新，我可以重新输入值） ，但我认为这不是一个合适的解决方案，因为它会导致我的浏览器控制台出现错误。这是因为“this.onChange”函数不存在。

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

问候，

维迪

原文由 vidihermes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用的是 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>
    );
  }
}

原文由 Turtle 发布，翻译遵循 CC BY-SA 3.0 许可协议