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

debugcn 发表于 Dev

判断

我的班级正在计算两个地方之间的小时数，给定每个地方的小时和分钟。我想更改<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>
    )
}

亨利伍迪

您可以将InputGroups打包到组件中，然后渲染组件。

下面是一个例子：

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>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。