React 从多个输入文本字段中读取输入值

Question

嗨，我有一个使用 imgflip public api 的小模因编辑器。 我通常使用 Angular 进行开发，但我正在尝试学习反应，所以我现在有点迷茫。

在我的项目中，当我加载页面时，我得到了所有可用 meme 模板的列表，然后当您使用 select 一个模板时，您将拥有每个 meme 文本行的模板和一个文本字段。 每个模板上输入文本的数量都会发生变化，这就是我卡住的地方。

这个想法是获取所有输入文本值，将其发送到 api 并向用户显示生成的 meme。

这是我现在的代码：

应用程序.js

import { useEffect, useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import memeService from './services/memeService';
import Meme from './components/Meme';
import './App.css';
import Editor from './components/Editor';


function App() {

  const [memes, setMemes] = useState([]);

  useEffect(() => {
    (async function getData() {
      await getMemes();
    })();
  }, []);

  const getMemes = async () => {
    const results = await memeService.getMemes();
    setMemes(results.data.data.memes);
  }

  return (
    <>
      <Router>
        <Switch>
        <Route path="/:id/edit" children={<Editor />} />
          <Route path="/">
            <div className='container'>
              {memes.map(meme => <Meme key={meme.id} meme={meme} />)}
            </div>
          </Route>
        </Switch>
        
      </Router>
      
    </>
  )
}

export default App;

编辑器.js

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import memeService from './../services/memeService';

const Editor = () => {

    const [meme, setMeme] = useState({});
    const {id } = useParams()

    const getMeme = async () => {
        setMeme(await memeService.getMeme(id));
    }

    useEffect(getMeme, [id]);

    const TextBox = () => {

        const inputs = [];

        for(let i = 0; i < meme.box_count; i++){
            inputs.push(<input key={i} type='text' />);
        }

        return (
            <>
                {inputs.map(input => {return input})}
            </>
        )
    }

    const generateMeme = () => {
        console.log('generating meme');
    }

    return (
        <>
            <div className='container'>
                <div className='meme'>
                    <img alt={meme.name} src={meme.url} />
                </div>
                <div className='text'>
                    <TextBox />
                </div>
            </div>
            <button onClick={generateMeme}>Save</button>
        </>
    )

}

export default Editor;

我对渲染输入文本字段的 TextBox function 并不感到自豪，但现在我最关心的是如何使这项工作正常进行。

我被卡住的地方在 Editor.js 上，我需要在编辑器上的输入文本字段中获取所有文本，以将其发送到 API。 在我遵循的其他教程中，我使用应用程序的 state 使用 onChange 事件进行了操作，因此当用户在文本上键入提交时，状态得到更新，当单击提交按钮时，我只使用当前的 state 但在这种情况下我不因为有多个不同的输入，所以看不到它的可能。

顺便说一句，这是我正在使用的 API： https://imgflip.com/api

Answer 1

首先，您需要跟踪输入中的值，方法是向TextBox添加一个数组并控制输入。

其次，您需要将值传递给父级。 为此，您可以添加一个处理程序方法，该方法会将值记住到ref中，例如

const values = useRef()
handleChange(newValues){
   values.current(newValues)
}

然后您将handleChange作为道具传递并在setValues之后调用它。 在提交时，您将在values.current中获得您的值

完整的TextBox ：

const TextBox = (props) => {
const [values, setValues] = useState([])
const inputs = [];

useEffect(()=>{
  props.onChange && props.onChange(values)
}, [values])

function handleInput(e, i)
{
  setValues(v =>{
    const temp=[...v];
    temp[i]=e.target.value;
    return temp})
}

for(let i = 0; i < meme.box_count; i++){
  inputs.push(<input key={i} type='text' value={values[i]} onChange={(e) => handleInput(e,i) } />);
}

return (inputs)
}