web-dev-qa-db-ja.com

入力のReact.js設定値

私はreact.jsの初心者であり、それは驚くべきことですが、実際の問題に直面しています：プレーンで純粋なjavascriptを使用して入力の値を設定する必要がありますが、何らかの理由でreact.jsが期待どおりに機能しません。この例を見てください：このURLを開く http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

Idが「CntctFrm2emailField」である「Email」入力フィールドがあることがわかります。このコードでjavascriptを使用して値を変更しようとしています：

document.getElementById("CntctFrm2emailField").value = "[email protected]";

しかし、何らかの理由で、React.jsはフォームを送信しようとすると（SENDボタンをクリック）、その根本的な原因でこの値を更新しません。メールが正しく入力されていないというエラーメッセージが表示されます。しかし、メールフィールド内をクリックして任意の文字を入力し、[送信]ボタンをクリックすると、正常に機能します。つまり、React.jsには新しい値が表示されます。

入力値を変更し、React.jsにその値も更新させるにはどうすればよいですか？

javascriptjqueryhtmlreactjs
22
Sitepor500.com.br

この関数を記述して使用し、フィールドの変更状態をトリガーしました。

function doEvent( obj, event ) {
    /* Created by [email protected] */
    var event = new Event( event, {target: obj, bubbles: true} );
    return obj ? obj.dispatchEvent(event) : false;
}

次のように使用します。

var el = document.getElementById("CntctFrm2emailField");
el.value = "[email protected]";
doEvent( el, 'input' );
14
David Refoua

あなたの状況に適した答えをより良く/より多く得るためにコードを投稿する必要がありますが、うまくいくと思うのは

defaultValue

入力のvalueの代わりに。ブラウザのコンソールを見てください。反応するとそこにログが記録されます。

コードに応じて、関数でstatesvalueonKeyUpなどを設定するか、フォームの送信時に新しい入力値を取得できます。 。

9
chris p bacon

React上記のソリューションは動作しません。これを確認してください。GitHubから issue をチェックしてください。

function setNativeValue(element, value) {
    let lastValue = element.value;
    element.value = value;
    let event = new Event("input", { target: element, bubbles: true });
    // React 15
    event.simulated = true;
    // React 16
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    element.dispatchEvent(event);
}

var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");
5
Ajay Bhosale

何らかの監視のために提出する必要のあるフォームがありました。私はこのようにしました：

$("input[type=email]").value = "[email protected]"
$("input[type=email]").defaultValue = "[email protected]"
$("input[type=password]").value = "mystellarpassword"
$("input[type=password]").defaultValue = "pinpmystellarpasswordss"
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true} ));
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true} ));
$("button.login").click()

ログインしているWebサイトでは、valueとdefaultValueの両方を設定する必要がありました。 input.valueにバインドされた追加の検証ロジックがありました

1
Kenny Cason

これはあなたの質問の鍵です、

しかし、何らかの理由でReact.jsはコアでこの値を更新していません

主な理由は、反応が「シャドウドーム」内で機能し、

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Instの更新は、何らかの方法でウィンドウdomオブジェクトのみに反応します。

Reactには、入力の値を更新する関数が組み込まれています。その方法を試してください。

反応フォームの詳細については、このページを確認してください： https://facebook.github.io/react/docs/forms.html#controlled-components

0
jmingov

まず、React.jsで「ドキュメント」オブジェクトを使用することは絶対にしないでください。それは大きな違いです。どちらもDOM要素にアクセスするべきではありませんが、何をしているのか（アニメーションなど）を知っている場合は、トピックから外れた「ref」オブジェクトを作成してDOM要素にアクセスする必要があります。

まず、フォームの状態オブジェクト内にオブジェクトが必要です。フォームに「ユーザー名」フィールドと「パスワード」フィールドがあるとします。

state={form:{username:"","password:""}

入力フィールドには独自の状態があるため、そこに入力したものはすべて入力フィールドに格納されます。入力フィールドの状態を取り除き、状態オブジェクトのみに依存する必要があります。単一の真実の情報源が必要なので、「入力」を「制御された要素」に変換します。制御された要素には独自の状態がなく、小道具を介してすべてのデータを取得し、イベントを発生させることでデータの変更を通知します。入力値を設定するために「値」プロップを使用しています。入力フィールドは空の文字列として初期化されるため、入力フィールド内に何かを入力することはできません。解決策は、入力フィールドの変更イベントを動的に処理する必要があることです。

handleChange=e=>{
    const form={...this.state.form}
    form[e.currentTarget.name]=e.currentTarget.value
    this.setState({account})}

<input value={this.state.form.username} change={this.handleChange} name="username"/>
<input value={this.state.form.password} change={this.handleChange} name="password" />
0
Yilmaz