Saya memiliki komponen bernama inputArea yang menerima informasi dari bidang input dan mengirimkannya ke server:

export default class InputArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      draw_number: '',
      user_number_1: '',
      user_number_2: '',
      user_number_3: '',
      user_number_4: '',
      user_number_5: '',
      user_number_6: '',
    }
  }

  submitHandler = () => {
    let { draw_number, ...rest } = this.state;
    let request = {
      numbers: Object.keys(rest).map(key => parseInt(rest[key])),
      draws: parseInt(draw_number)
    };
    this.props.onSubmit(request);
  }

  inputHandler = event => this.setState({[event.target.name]: event.target.value});

  render() {

      return (
        <InputField>
          <InputWrapper>
            {/* <Input > */}
            <Label>1st number</Label>
            <Input name="user_number_1" type="number" maxlength="2" value={this.state.user_number_1} onChange={this.inputHandler} required></Input>
            <Label>2nd number</Label>
            <Input name="user_number_2" type="number" maxlength="2" value={this.state.user_number_2} onChange={this.inputHandler} required></Input>
            <Label>3rd number</Label>
            <Input name="user_number_3" type="number" maxlength="2" value={this.state.user_number_3} onChange={this.inputHandler} required></Input>
            <Label>4th number</Label>
            <Input name="user_number_4" type="number" maxlength="2" value={this.state.user_number_4} onChange={this.inputHandler} required></Input>
            <Label>5th number</Label>
            <Input name="user_number_5" type="number" maxlength="2" value={this.state.user_number_5} onChange={this.inputHandler} required></Input>
            <Label>6th number</Label>
            <Input name="user_number_6" type="number" maxlength="2" value={this.state.user_number_6} onChange={this.inputHandler} required></Input>
            <Label>Number of draws:</Label>
            <Input name="draw_number" type="number" value={this.state.draw_number} onChange={this.inputHandler} required></Input>
          </InputWrapper>
          <Button type="button" onClick={this.submitHandler}>Let's win!</Button>
        </InputField>
      )
  }
}

Saya ingin mempersingkat komponen ini agar tidak memiliki nilai yang berulang. Dapatkah saya menulis komponen baru yang akan menerima "teks" dan "input" dan memberikan nilai input (kecuali draw_numbers)?

-2
Leocete 28 Maret 2019, 18:05

1 menjawab

Jawaban Terbaik

Anda dapat membuat sesuatu yang dapat mengulangi status Anda jika Anda ingin menghasilkan input tersebut secara terprogram seperti:

{Object.entries(this.state).map(([key, value]) => {
  if (key.includes("user_number")) {
    return <div key={key}>
        <Label>Number {key.replace(/\D*/, '')}</Label>
        <Input name={key} type="number" maxlength="2" value={value} onChange={this.inputHandler} required></Input>
      </div>
  }
})}

1
Tom Finney 28 Maret 2019, 15:15