Блог

Я создал сценарий для множественного добавления поля в react js. В этом я добавил переключатель для выбора одного варианта, а другой отключен. когда у меня есть обновление, я не получил переключатель формы с установленным значением, где я получаю значение из api

 const [disabledField, setDisabledField] = useState<string>("weightedAuction");
const addEmptyTargetFields = () => {
  setTarget((previousTarget) => [...previousTarget, target.length   1]);
};
const removeTarget = (index: number) => {
  setTarget([...target.slice(0, index), ...target.slice(index   1)]);
};
  

я беру образец статических данных для флажка, в котором я проверил, имеет ли значение bidFloor значение, превышающее значение checked или weightedAuction значение, превышающее значение checked

 let bidrule = {
  targets: [{ bidFloor: 10, weightedAuction: null }],
};
  

это мой код просмотра для переключателя

 {target.map((e, i) => {
        return (
          <div key={i}>
            <FlexWrapper>
              <BidderSelectWrapper>
                <Controller
                  as={Select}
                  control={control}
                  name={`targets[${i}].networkId`}
                  placeholder="Bidder"
                  options={networkOptions}
                  optionComponent={NetworkOption}
                  // defaultValue={defaultValueSelect[i]}
                  value={networkOptions.find(({ value: value }) => value === "")}
                />
                {/* <Controller as={BidderSelect} control={control} name={`targets[${i}].networkId`} /> */}
              </BidderSelectWrapper>
              <Separator width="48px" />
              <FlexColumnWrapper>
                <FlexWrapper align="center">
                  <RadioButton
                    name={`target_value_${i}`}
                    value={"bitFloor"}
                    checked={bidrule.targets[i].bidFloor}
                    onClick={() => {
                      setDisabledField("weightedAuction");
                      bidrule.targets[i].radioChecked = "weightedAuction";
                    }}
                  />
                  <Separator width="24px" />
                  <Textbox
                    placeholder="Bid Floor"
                    formRef={register}
                    name={`targets[${i}].bidFloor`}
                    isDisabled={disabledField === `bidFloor`}
                    value={bidrule.targets[i]?.bidFloor}
                  />
                </FlexWrapper>
                <HorizontalSeparator height="24px" />
                <FlexWrapper align="center">
                  <RadioButton
                    name={`target_value_${i}`}
                    value={"weightedAuction"}
                    checked={bidrule.targets[i].weightedAuction}
                    onClick={() => {
                      setDisabledField("bidFloor");
                      bidrule.targets[i].radioChecked = "weightedAuction";
                    }}
                  />
                  <Separator width="24px" />
                  <SliderWrapper>
                    <Controller
                      as={SliderComponent}
                      control={control}
                      title="Weighted Auction"
                      min={0}
                      max={100}
                      name={`targets[${i}].weightedAuction`}
                      isDisabled={disabledField === "weightedAuction"}
                      defaultValue={bidrule.targets[i]?.weightedAuction}
                    />
                  </SliderWrapper>
                </FlexWrapper>
              </FlexColumnWrapper>
              {i > 0 amp;amp; <StyledCross onClick={() => removeTarget(i)} />}
            </FlexWrapper>
          </div>
        );
      })}
      <LinkButton onClick={() => addEmptyTargetFields()}>Add More</LinkButton>
  

это мой код вызова переключателя

 interface CheckboxProps {
 name?: string;
 value?: string;
 checked?: boolean;
 textLabel?: string;
 onChange?: (e: React.ChangeEvent) => void;
 onClick?: (e: React.MouseEvent) => void;
}

const RadioButtonComponent: React.FC<CheckboxProps> = (props) => {
const { textLabel, onChange, name, value, checked, onClick } = props;

return (
 <Wrapper>
  <Input
    type="radio"
    name={name}
    value={value}
    checked={checked}
    aria-checked={checked}
    onChange={onChange}
    onClick={onClick}
  />
  <Fill />
  <div style={{ marginLeft: "25px" }}>{textLabel}</div>
 </Wrapper>
);