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

Question

Hi I have a little meme editor using the imgflip public api. I usually develop using Angular but I'm trying to learn react so I'm a little lost right now.

On my project when I load the page I get a list of all the meme templates available, then when you select one template you have the template and one text field for each meme text line. The number of input texts changes on each template this is where I'm stuck.

The idea is to get all the input text values, send it to the api and show the generated meme to the user.

This is my code right now:

App.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;

Editor.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;

I'm not proud at all of the TextBox function that renders the input text fields but for now I'm mostly concerned about making this work.

THe point where I'm stuck is on the Editor.js I need to get all the text on the input text field that I have on the editor to send it to the API. On other tutorials that I followed I didi it using the app's state using the onChange event so when the user types on the text submit the states gets updated and when clicking on the submit button I just use the current state but on this scenario I don't see it possible as there's multiple and different inputs.

By the way this is the API I'm using: https://imgflip.com/api

Answer 1

First, you need to keep track of values in the inputs, by add an array to the TextBox and making inputs controlled.

Second, you need to pass the values to the parent. For that you can add a handler method, which will remember the values into a ref , like

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

Then you pass handleChange as a prop and call it after setValues . And on submit you'll have your values in values.current

The complete 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)
}