React - 如何从我的多个输入中获取值并将它们发送到我的输入？

Question

我正在使用 <autocomplete> 作为输入字段，我正在尝试在我的控制台中记录值以查看我的提交方法是否有效。目前，我无法提交任何内容，只能向我的 axios 实例提交空数据，并且无法处理任何 Traceback 错误。我的后端工作正常，只是努力从我的表单发送 data。

我只是尝试将 symbol 从输入值字段发送到我的后端，

const inputOptions = [
  { symbol: "ACN", company: "Accenture Plc", sector: "Technology Services"}
];

查看我的可重现代码：

https://codesandbox.io/s/dazzling-lake-jvdyf?file=/src/App.js {没有 axios 实例}

表格：

      <div className={classes.container}>
        <Grid>
            <form noValidate  onSubmit = { handleSubmit(onSubmit) }>
              <Controller
              render={({ onChange ,...props }) => (
                <Autocomplete
                    {...props}
                    className={classes.inputBar}
                    id="stock_list"
                    name="stock_list"
                    multiple
                    options={inputOptions.companies}
                    filterOptions={filterOptions}
                    filterSelectedOptions
                    defaultValue={[]}
                    onChange={(e, data) => onChange(data)}
                    getOptionLabel={(option) => option.symbol}
                    getOptionSelected={(option, value) => option.symbol === value.symbol}
                    renderOption={(option) =>
                    {
                      return (
                        <>
                          <span style={{ fontWeight: 500, fontSize: "20px", paddingRight: "1rem" }}>{option.symbol}</span><span style={{ color: "#C6C6C6", fontSize: "24px" }}> | </span><span style={{ paddingLeft: "1rem" }}>{option.company}</span>
                        </>
                      )
                    }}
                    renderInput={(params) => (
                      <TextField 
                        {...params}
                        style={{ alignItems: 'center' }}
                        id="stock_list"
                        name="stock_list"
                        variant="outlined"
                        label="Companies"
                        className={classes.inputBar}
                      />
                       )}
                      />
                    )}
                    name="stock_list"
                    control={control}
                    defaultValue={[]}
                    onChange={([, data]) => data}
            />
            <Button 
              variant="contained" 
              color="primary"
              onClick={handleSubmit}
            >
              Add Stocks
            </Button>
            </form> 
        </Grid>
          </div>

我需要将 symbol 值从上面的多输入表单发送到我的 axios 实例。

事实证明，使用 react-hook-form 和 Material UI 很难做到这一点。

编辑：我正在尝试从输入字段中提取值，感谢我能够记录的评论以查看选择了 JSON 的哪些值，但表单未正确链接尚未提交数据，因为它似乎正在向我的后端发送一个空字典。

这是我的 axios 实例。

  const onSubmit = (data, e) =>
  {  
    console.log(data);

    axiosInstance
      .patch(url+ slug + '/', {
        stock_list: data.symbol,
      })
      .then((res) =>
      {
        console.log(res);
        console.log(res.data);
      });
  };

Answer 1

向提交按钮添加 type="submit" 并删除 onClick，这些更改将使表单提交功能在单击“添加股票”按钮时被触发

<Button variant="contained" color="primary" type="submit">
      Add Stocks
 </Button>

Answer 2

我修改了可重现的代码并提出了这个。

https://codesandbox.io/s/wispy-firefly-n0ygq?file=/src/App.js

您现在可以在提交方法中访问选定的符号。

React - 如何从我的多个输入中获取值并将它们发送到我的输入？

React - How can I get the values from my multiple input and send them to my input?

javascript

reactjs

material-ui

react-hook-form