Reactフォームの検証でも値が追加されます

Question

フォームの検証が少し行われていますが、問題が発生しています。私が最初にウェブアプリケーションを読み込んで、値を追加してボタンで送信しようとすると、それは私を許さず、私に見せたいエラーを与えます。しかし、値を追加するとsetStateが発生し、その値がUIにプッシュされ、別の空白値を追加しようとすると、前に空の文字列をチェックする条件ロジックが間違っていないのですか？

addItem() { 
    let todo = this.state.input; 
    let todos = this.state.todos; 
    let id = this.state.id; 


     if (this.state.input == '') { 
     alert("enter a value"); 
     document.getElementById('error').style.color = 'red'; 
     document.getElementById('error').innerHTML = 'Please enter something first'; 
     } 

     else { 
     this.setState({ 
      todos: todos.concat(todo), 
      id: id + 1, 
     },() => { 
      document.getElementById('test').value = ''; 
     }) 
     console.log(this.state.id); 
     } 

    } 

Answer 1

あなたはthis.state.inputをチェックしているが、そのコードにはどこがオン状態input値を設定されていません。それはあなたのアプリケーションに理にかなって、これを追加すること

試してみてください。また

this.setState({ input: 'some value' });

は、私はあなたがアプリケーションのUIを定義するために状態を使用することをお勧め。したがって、document.getElementById('error')またはdocument.getElementById('test').valueを使用する代わりに、あなたの状態にあるものがUIに反映されます。

詳細はこちらを参照してください。代わりに、直接DOMを操作するhttps://reactjs.org/docs/forms.html

Answer 2

を：

document.getElementById('test').value = ''; 

使いたいでしょうリアクト：

this.setState({ input: '' }); 

リアクトための良いグラウンドルールelement.value = valueやelement.style.color = 'red'のような呼び出しで直接DOMを操作しないことです。これはReact（& setState）です。詳しくはreactjs.orgをご覧ください。

Answer 3

あなたがあなたの問題の解決策を探して前に、私はあなたが特別なユースケースを持っているか、外部のプラグインを扱う、これがない場合を除き、あなたが直接DOM

例

document.getElementById('error').style.color = 'red'; 
document.getElementById('error').innerHTML = 'Please enter something first'; 
document.getElementById('test').value = ''; 

を更新していることに気づきましたReactを扱う際には、仮想DOMを使用して更新する必要があります。 https://www.codecademy.com/articles/react-virtual-dom

擬似コードサンプル

constructor(props) { 
    this.state = { 
    // retain previous states in here removed for example simplicity 
    errorString: '' 
    } 
}  

addItem() { 
     let todo = this.state.input; 
     let todos = this.state.todos; 
     let id = this.state.id; 


      if (this.state.input == '') { 
      alert("enter a value"); 
      this.setState({ 
       errorString: 'Please enter something first' 
      }); 
      } 
      else { 
      this.setState({ 
       todos: todos.concat(todo), 
       id: id + 1, 
       input: '', 
      }); 
      } 

     } 
    // notice the "error" and "test" id this could be omitted I just added this for your reference since you mentioned those in your example. 
    render() { 
     return (
     <div> 
     {(this.state.errorString !== '') ? <div id="error" style={{color: 'red'}}>{this.state.errorString}</div> : null} 
     <input id="test" value={this.state.input} /> 
     </div> 
    } 

あなたがSETSTATEが反応呼び出すたびに、これは何が起こっているかをまとめたものです更新された状態でレンダリングを呼び出しますが、仮想の関与を含めSETSTATE後ろに行く事がたくさんありますDOM。