在函数之外使用 useState 时如何获取值？

Question

我正在尝试在代码中采用这种形式并制作它，以便我可以将它放入数据中，以便我可以将其发布到我的数据库中。

有没有办法获取步骤 useState 的值并将其设置为状态？

这里是useState的具体功能

const StepInput = () => {
  const [steps, setSteps] = useState([{ value: null }]);

  function handleChange(i, event) {
    const values = [...steps];
    values[i].value = event.target.value;
    setSteps(values);
  }

  function handleAdd() {
    const values = [...steps];
    values.push({ value: null });
    setSteps(values);
  }

  function handleRemove(i) {
    const values = [...steps];
    values.splice(i, 1);
    setSteps(values);
  }

  return (
    <div>
      <button type="button" onClick={() => handleAdd()}>
        +
      </button>

      {steps.map((step, idx) => {
        return (
          <div key={`${step}-${idx}`}>
            <input
              type="text"
              placeholder="Enter Step"
              value={step.value || ""}
              onChange={e => handleChange(idx, e)}
            />
            <button type="button" onClick={() => handleRemove(idx)}>
              X
            </button>
          </div>
        );
      })}
    </div>
)
}

这就是它的名称。这是我将使用 Axios 发布数据的地方。

export default class RecipeCreationForm extends Component {
  constructor(props) {
      super(props)

      this.state = {
          recipe_name: "",
          recipe_difficulty: "",
      }
      this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
      errorText: ""
    })
  }

  handleSubmit(event) {
      console.log(this.value.props.step)
  }

  render() {
      return (
          <div>
              <form>
                  <input 
                    className="input-box"
                    type="text"
                    name="recipe_name"
                    placeholder="Recipe Name"
                    value={this.state.recipe_name}
                    onChange={this.handleChange}
                  />
                  <input 
                    className="input-box"
                    type="text"
                    name="recipe_difficulty"
                    placeholder="Recipe difficulty 1-10"
                    value={this.state.recipe_difficulty}
                    onChange={this.handleChange}
                  />
                  <StepInput />
                  <button type="submit">Create Recipe</button>
              </form>
          </div>
      )
  }
}

Answer 1

我的朋友有很多方法。

对于这种情况，最简单和推荐的方法是为您的 步进输入。

// at RecipeCreationForm 
simpleCallback= (stepInpuData) =>{
// your code here
}

<StepInput simpleCallback={simpleCallback}


// on your step input file

const StepInput = ({simpleCallback}) =>{

  useEffect(() => {
    simpleCallback(steps)
  }, [steps])

对于更复杂的情况，你有 redux。

但你也可以使用 Apollo（Redux 太复杂了）