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

Question

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

有没有办法获取步骤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 post处理数据的地方。

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 太复杂了）

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

How do I get the value when using useState outside of the function?

reactjs

use-state