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'}
]
は、私はオブジェクトを使用して容易になるだろう知っているが、私は本当に配列は、各オブジェクトは、それが{タイプのような独自の情報がある原因であることが検証を必要とする:「MINLENGTH」、値:1、meassage:「分の長さを1 '} – scully
なぜあなたはこれをしないのですか? 検証:{ プレースホルダ:{メッセージ: '分の長さが1である'、値:1' }、 MINLENGTH:{メッセージ: '分の長さが1である'、値:1' }、 MAXLENGTH:{メッセージ: 'min length is 1'、value:1 '} } – pk1m