如何将不同的值传递给后端并在 ui 中显示不同的值在 react js 中提交？

Question

我是 React js 的新手。我正在获取一个 API ，其中有来自后端的两个值 { 编号：整数，名称：字符串， } 我正在使用地图作为无线电格式显示相同的数据，如下所示

<FormControl component="fieldset" className={classes5.formControl}>
    <FormLabel component="legend">Document Type</FormLabel>
    <RadioGroup
        key="id"
        aria-label="Document"
        // name="id"
        className={classes5.group}
        value={value}
        onChange={handleChange}
        //row>
        {docs?.map((x) => 
            (<FormControlLabel
                key={x.id}
                value={x.name}
                control={<Radio />}
                label={x.name} />)
            )
        }
     </RadioGroup>
</FormControl>

这里handle的变化很简单

const initialValues={id :0}
const [value, setValue] = React.useState({initialValues});
function handleChange(event) {setValue(event.target.value);}

我正在上传一个带有 userid formdata 和 id 的文件，我想传递单选按钮的 id 在更新方法的 id 字段中。

const uploadFile = (files) => {
   if (files.length > 0) {
      let formData = new FormData();
      for (var j = 0; j < files.length; j++) {
          formData.append("file", files[j], files[j].name);
      }

      if (isValidFiles(files)) {
          alert('valid');
      } else {
           alert('invalid');
      }

      upload(formData, userId,id).then((response) => {
          if (response) {} else {}
      });
   }
}

如何传递相同的事件目标值是从 API 发送名称事件目标名称正在发送 id 但我无法提交该 id 面对的字符串无法转换为 int 并且有时也会得到错误的值？

Answer 1

在这种情况下，我想将 id 传递给后端并希望在标签中显示名称。早些时候，当我将值更改为 id 时，我在提交数据时在值状态中得到了空值，并且按钮也没有更改为选中。为此，我更改了广播组如下

<RadioGroup
      key="id"
      aria-label="Document"
      className={classes5.group}
      value={value}
      onChange={handleChange}
      row>
      {docs?.map((x) =>
   (<FormControlLabel
       key={x.id}
       value={x.id.toString()}
       control={<Radio />}
       label={x.name} />)
        )}
</RadioGroup>

通过单击 handleChange 值完美地传递给值。在这里我使用了 toString() ，因为当我传递值时，单选按钮的颜色没有变成选定的单选按钮，是的，它起作用了。如果有任何建议或需要更正一些方法建议接受问候。

如何将不同的值传递给后端并在 ui 中显示不同的值在 react js 中提交？

how to pass different value to backend and show different value in ui on submit in react js?

reactjs

formik