web-dev-qa-db-ja.com

React入力要素：値とデフォルト値

React and REDUX、私は単純な反応アプリを開発するだけで、要素に「値」を設定すると、コンポーネント内に入力要素をレンダリングするときに問題に直面します読み取り専用になりますが、「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」関数が存在しないためです。

この問題を解決するために私を親切に助けてください、そして事前に感謝します

よろしく、

ヴィディ

javascriptreactjsfrontend
21
vidihermes

入力が機能しない理由は、defineonChange関数を実際に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>
19
Shubham Khatri

リデューサーを介してコンポーネントの状態を更新するアクションであるreduxを使用している場合は、onChangeメソッドを定義する必要があります。 es6で単純な状態を使用する簡単な方法を以下に示します。さらに、Facebookで推奨されていないrefを介して入力フィールドから値を取得しています。また、コンポーネントを制御したり制御しなかったりするため、エラーが発生するはずです。

ここにリンクがあります さらに読むためにフォームのドキュメントへ。

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>
    );
  }
}
3
Turtle