将输入中的值设置为状态

Question

我有任务：

• 当用户将一些单词写入输入并按下 SetValue 按钮时，应在inputValue字段中将该单词设置为值。< / li>

但是我没有输入经验。并且知道如何执行此任务...

文件App.js ：

import SetValue from "./SetValue.js"
const App = () => {

  const [value, setValue] = useState({
    inputValue: ""
  });

// THERE SHOULD BE SOME METHOD or TWO METHODS WHO IMPLEMENTS MY TASK

return (
    <div>
      <SetValue/>  
   </div>
  );
};

我已经输入了按钮（ SetValue.js文件）

export default () => {
  return (
    <div>
        <input type="text" />
        <button>SetValue</button>
    </div>
  );
};

我需要在 App.js 文件和 SetValue.js 文件的代码中添加什么来实现任务？

Answer 1

最简单的方法是传递一个编辑状态的函数，并将状态值传递给子组件。在子组件中，您可以通过props变量访问这些值。在父组件中，您实现了一个功能，该功能可以复制状态，更新状态的副本并更新组件的状态。您可以通过设置onChange函数来访问输入字段的值。但是，由于要创建controlled component，因此必须设置输入字段的value。您可能需要查看this article以获得更多帮助。

App.js

import React, { useState } from 'react';
import SetValue from "./SetValue.js"

const App = () => {

  const [state, setState] = useState({
    inputValue: ""
  });

  const setValueFromInput = value => {
    const copyOfState = { ...state };
    copyOfState.inputValue = value;
    setState(copyOfState);
  };

  return (
    <div>
      <SetValue
        state={state}
        setValueFromInput={setValueFromInput}
      />
    </div>
  );
};

SetValue.js

const SetValue = props => {
  return (
    <div>
      <input
        type="text"
        value={props.state.value}
        onChange={event => props.setValueFromInput(event.target.value)}
      />
      <button>SetValue</button>
    </div>
  );
};

export default SetValue;