如何在ReactJS中使表单输入相互依赖

问题描述

我正在尝试创建一个与对等2对等借贷类似的应用程序，这里给出一个更好的主意是一个屏幕。 Lending Application

因此，贷款额和金额代表相同的数据：您想要获得的金额。我想知道如何将输入量与滑块连接起来，以便后者根据键入的数量移动，反之亦然。 我也希望利率随着请求的数量增加而增加X倍，反之亦然。

表单代码：

......
  <div className="form-group">
              <label htmlFor="size">Loan size</label>
              <Typography id="discrete-slider-always" gutterBottom>
                Min.
              </Typography>
              <Slider
                defaultValue={550}
                min={100}
                max={1000}
                aria-labelledby="discrete-slider-always"
                step={1}
                valueLabeldisplay="on"
              />

              <TextField
                id="standard-read-only-input"
                label="Interest rate"
                defaultValue="25%"
                InputProps={{
                  readOnly: true,}}
              />

              <FormControl fullWidth  variant="outlined">
                <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
                <OutlinedInput
                  id="size"
                  name="size"
                  value={tutorial.size}
                  onChange={handleInputChange}
                  startAdornment={<InputAdornment position="start">$</InputAdornment>}
                  labelWidth={60}

                />
              </FormControl>

......

我希望我尽可能的清楚！

解决方法

执行以下操作：

const X_FACTOR = 0.045;

const [amount,setAmount] = React.useState(550);

  const handleAmountChange = (value) => {
    setAmount(value);
  };
<Slider
        defaultValue={550}
        min={100}
        max={1000}
        aria-labelledby="discrete-slider-always"
        step={1}
        value={amount}
        onChange={(e,value) => handleAmountChange(value)}
        valueLabelDisplay="on"
      />

      <TextField
        id="standard-read-only-input"
        label="Interest rate"
        defaultValue="25%"
        value={`${Math.ceil(amount * X_FACTOR)}%`}
        InputProps={{
          readOnly: true
        }}
      />

      <FormControl fullWidth variant="outlined">
        <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
        <OutlinedInput
          id="size"
          name="size"
          value={amount}
          onChange={(e) => handleAmountChange(e.target.value)}

我创建了一个沙箱来展示我的解决方案：https://codesandbox.io/s/agitated-torvalds-ed2s7?file=/src/App.tsx