2017-07-10 2 views
0
class InputTextComp extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     validations: [] 
    }; 
    } 


    handleChange(e){ 

    let newState = this.state; 


    newState.validations.push({ 
     type: e.target.name, 
     value: e.target.value 
     }); 

    this.setState(...this.state, newState); 

    } 

    render() { 

     return (
     <Form> 
      <Form.Group widths='equal'> 
      <Form.Field> 
       <label>Placeholder</label> 
       <input name='placeholder' onChange={this.handleChange} placeholder='Placeholder' /> 
      </Form.Field> 
      <Form.Field> 
       <label>Min length</label> 
       <input name='minlength' onChange={this.handleChange} placeholder='Min length' /> 
      </Form.Field> 
      <Form.Field> 
       <label>Max length</label> 
       <input name='maxlength' onChange={this.handleChange} placeholder='Max length' /> 
      </Form.Field> 
      </Form.Group> 
     </Form> 
    ) 

    } 

} 

私が入力中のonChangeを使用して、このコンポーネントを持って、私は私の状態では、配列、オブジェクトの配列、各入力値 のオブジェクトを持っていますが、私は1つの入力に値を入れたときにしてそのような新しいオブジェクトをプッシュします各変更react:onChangeは配列内で1回だけを押すことができますか?

validations: [ 
{type:'maxlength', value: '1'}, 
{type:'maxlength', value: '12'}, 
{type:'maxlength', value: '120'} 
] 

私は一つだけその

validations: [ 
{type:'maxlength', value: '120'} 
] 

答えて

0

のような配列内の各入力用オブジェクトの代わりに、検証のための配列を使用してを持つようにしたいが、あなたはハッシュを使用する必要があります

validations: { placeholder: '', minlength: '', maxlength: '' }

次いでonChangeは、最新の変更と各検証を設定することができます。

newState[e.target.name] = e.target.value

+0

は、私はオブジェクトを使用して容易になるだろう知っているが、私は本当に配列は、各オブジェクトは、それが{タイプのような独自の情報がある原因であることが検証を必要とする:「MINLENGTH」、値:1、meassage:「分の長さを1 '} – scully

+0

なぜあなたはこれをしないのですか? 検証:{ プレースホルダ:{メッセージ: '分の長さが1である'、値:1' }、 MINLENGTH:{メッセージ: '分の長さが1である'、値:1' }、 MAXLENGTH:{メッセージ: 'min length is 1'、value:1 '} } – pk1m

関連する問題