Question

我的班级正在计算两个个位置之间的小时，并给出每个位置的小时和分钟。我想更改<Input>部分，这样我就不必重复自己了。功能时间采用两个参数：“小时”和“分钟”。我尝试过，但不知道。请帮忙。

updateTime(time, value){
    let clock = this.state.time;
    clock[time] = value;
    this.setState(clock);
}
render(){
    return(
      <div>
        <Card>
          <CardBody>
            <InputGroup>
              <InputGroupAddon addonType={"prepend"}> Hour Origin</InputGroupAddon>
              <Input placeholder=“1” onChange={(event)=> this.updateTime(‘hour’,event.target.value)}/>
              <InputGroupAddon addonType={"prepend"}>Minute Origin</InputGroupAddon>
              <Input placeholder=“1” onChange={(event)=> this.updateTime(‘minute’, event.target.value)}/>
            </InputGroup>

            <InputGroup>
              <InputGroupAddon addonType={"prepend"}> Hour Destination</InputGroupAddon>
              <Input placeholder=“1” onChange={(event)=> this.updateTime(‘hour’,event.target.value)}/>
              <InputGroupAddon addonType={"prepend"}>Hour Destination</InputGroupAddon>
              <Input placeholder=“1” onChange={(event)=> this.updateTime(‘minute’, event.target.value)}/>
            </InputGroup>
          </CardBody>
        </Card>
      </div>
    )
}

Answer 1

您可以将InputGroup封装在组件中，然后渲染组件。

这是一个例子：

const HourMinuteInputGroup = props => {
    const { locationName, updateTime } = props;

    return (
        <InputGroup>
            <InputGroupAddon addonType={"prepend"}>Hour { locationName }</InputGroupAddon>
            <Input placeholder="1" onChange={ event => updateTime('hour',event.target.value) }/>
            <InputGroupAddon addonType={"prepend"}>Minute { locationName }</InputGroupAddon>
            <Input placeholder="1" onChange={ event => updateTime('minute', event.target.value) }/>
        </InputGroup>
    )
}

然后您的原始render变为：

render(){
    return(
    <div>
        <Card>
            <CardBody>
                <HourMinuteInputGroup locationName="Origin" updateTime={ this.updateTime }/>
                <HourMinuteInputGroup locationName="Destination" updateTime={ this.updateTime }/>
            </CardBody>
        </Card>
    </div>
    )
}

如何在渲染ReactJS中动态创建两个输入占位符

1 个答案: