2017-07-10 1 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> 
    ) 

    } 

} 

i haben diese Komponente in dem i onChange in Eingabe verwenden, habe ich ein Array in meinem Zustand, Anordnung von Objekten, Objekt jedes Eingangswerts aber wenn i Wert gesetzt in einem Eingangs es, ein neues Objekt wie das Push mit für jeden Eingang in der Anordnung jede Änderungreagieren: wie onChange konnte nur einmal in Array drücken?

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

ich will, wie die für Validierungen

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

Antwort

0

stattdessen eine Reihe von mit nur ein Objekt haben, sollten Sie einen Hash

verwenden

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

dann die onChange kann die jeweilige Validierung mit der neuesten Änderung eingestellt.

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

+0

ich weiß, es wäre einfacher, Objekt zu verwenden, aber ich brauche Validierungen wirklich sein verursachen ein Array jedes Objekt eine eigene Informationen wie {Typ hat: ‚minlength‘, Wert: 1, meassage: ‚min Länge ist 1 '} – scully

+0

Warum konnten Sie das dann nicht tun? Validierungen: { Platzhalter: {message: 'min Länge 1', Wert: 1' }, minlength: {message: 'min Länge 1', Wert: 1' }, maxlength: {Nachricht: 'Mindestlänge ist 1', Wert: 1 '} } – pk1m

Verwandte Themen