Question

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，我在我的状态中有一个数组，对象数组，每个输入值的对象但是当我将值放在一个输入中时，每次更改都会推送一个像这样的新对象

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

我希望数组中的每个输入只有一个对象

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

Answer 1

而不是使用数组进行验证，您应该使用哈希

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

然后onChange可以使用最新的更改设置相应的验证。

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

反应：onChange怎么只能在阵列中推一次？

1 个答案: