如何在 React forms 中傳遞道具

Question

我是 React 的新手，我正在做一個學習項目，我在其中構建了一個非常簡單的 Mad Libs 游戲。 我很掙扎，不知道如何去做 go 。

我構建了一個骨架，但我不確定如何將道具從<Form />傳遞回<Story /> ，也不知道如何處理useState 。

我會很感激任何幫助。 這是我到目前為止所擁有的：

應用程序.js

function App() {
  return (
    <React.Fragment>
      <h1>Mad Libs</h1>
      <Story />      
    </React.Fragment>

  );
}  

故事.js

function Story() {
const [blanks, setBlanks] = useState([]);

const renderStory = () => {
    return (
        <p>O say can you {blanks.verb1} by the dawn's early {blanks.noun1},
        What so {blanks.adverb1} we {blanks.verb2} at the twilight's last gleaming, 
        Whose broad {blanks.noun2} through the {blanks.adjective1} fight.</p>
    );
};    

return (
    <div>
        <Form setBlanks={setBlanks} />
        {renderStory()}
    </div>
  );
};

表單.js

const Form = ({setBlanks}) => {

const handleSubmit = evt => {
    evt.preventDefault();
    setBlanks([]);
};

return (
    <form onSubmit={handleSubmit}>
        <label htmlFor="verb1">Verb</label>
        <input
            id="verb1"
            type="text"
            name="verb1"
            placeholder="verb"
        />

        <label htmlFor="noun1">Noun</label>
        <input
            id="noun1"
            type="text"
            name="noun1"
            placeholder="noun"
        />

        <label htmlFor="adverb1">Adverb</label>
        <input
            id="adverb1"
            type="text"
            name="adverb1"
            placeholder="adverb"
        />

        <label htmlFor="verb2">Verb</label>
        <input
            id="verb2"
            type="text"
            name="verb2"
            placeholder="verb"
        />

        <label htmlFor="noun2">Noun</label>
        <input
            id="noun2"
            type="text"
            name="noun2"
            placeholder="noun"
        />

        <label htmlFor="adjective1">Adjective</label>
        <input
            id="adjective1"
            type="text"
            name="adjective1"
            placeholder="adjective"
        />

        <button>Submit</button>
    </form>
  );
}

Answer 1

首先，您的空白 state 應初始化為空 object，如下所示：

const [blanks, setBlanks] = useState({});

然后對於您的每個輸入，您可以添加一個 onchange function，如下所示：

<input
  id="verb1"
  type="text"
  name="verb1"
  placeholder="verb"
  onchange={({target: {name, value}}) => (setBlanks(prevState => ({...prevState, [name]: value})))}
/>

Answer 2

這是工作示例的更新

故事.js

function Story() {
    const [blanks, setBlanks] = useState([{}]);

    const renderStory = () => {
        return (
            <p>O say can you {blanks[0]?.verb1} by the dawn's early {blanks[0]?.noun1},
                What so {blanks[0]?.adverb1} we {blanks[0]?.verb2} at the twilight's last gleaming,
                Whose broad {blanks[0]?.noun2} through the {blanks[0]?.adjective1} fight.</p>
        );
    };

    return (
        <div>
            <Form setBlanks={(data) => setBlanks(data)}/>
            {renderStory()}
        </div>
    );
};

表單.js

const Form = ({setBlanks}) => {

    const handleSubmit = evt => {
        evt.preventDefault();
        setBlanks([
            {
                "verb1": evt.target.verb1.value,
            },
            {
                "noun1": evt.target.noun1.value,
            },
            {
                "adverb1": evt.target.adverb1.value,
            },
            {
                "verb2": evt.target.verb2.value,
            },
            {
                "noun2": evt.target.noun2.value,
            },
            {
                "adjective1": evt.target.adjective1.value,
            },

        ]);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="verb1">Verb</label>
            <input
                id="verb1"
                type="text"
                name="verb1"
                placeholder="verb"
            />

            <label htmlFor="noun1">Noun</label>
            <input
                id="noun1"
                type="text"
                name="noun1"
                placeholder="noun"
            />

            <label htmlFor="adverb1">Adverb</label>
            <input
                id="adverb1"
                type="text"
                name="adverb1"
                placeholder="adverb"
            />

            <label htmlFor="verb2">Verb</label>
            <input
                id="verb2"
                type="text"
                name="verb2"
                placeholder="verb"
            />

            <label htmlFor="noun2">Noun</label>
            <input
                id="noun2"
                type="text"
                name="noun2"
                placeholder="noun"
            />

            <label htmlFor="adjective1">Adjective</label>
            <input
                id="adjective1"
                type="text"
                name="adjective1"
                placeholder="adjective"
            />

            <button>Submit</button>
        </form>
    );
}