如何从辅助文件修改反应useState

Question

我是新手，目前正在尝试从另一个文件修改 useState 挂钩。当“Options.tsx”中的一个单选按钮被选中时，结果应该以某种方式使用 useState 挂钩的 setResult 函数进行更新，以便标签得到更新。

我想我几乎明白了，但我没有设法将正确的“onSelect”属性传递给 Options.tsx，所以它被更新了。

到目前为止，这是我的代码：

应用程序.tsx

import React from 'react';

import './App.css';

import { useState } from 'react';

import { Result, ResultType } from './Result'

import { Options } from './Options'

function App() {

    const [result, setResult] = useState<ResultType>('pending')

    return (

        <div className="App">

            <header className="App-header">

                <Options onSelect={props.onSelect} />

                <Result result={result} />

            </header>

        </div>

    );

}

export default App;

选项.tsx

import React from 'react'

interface Props {

    onSelect: (correct: boolean) => void

}

export const Options = ({onSelect}: Props) => {

    // TODO

    const setWrong = () => setResult('wrong');

    const setCorrect = () => setResult('correct');

    return(

        <div>

            <fieldset>

                <input type='radio' id='option1' onSelect={setWrong}/>

                <label htmlFor='option1'>Label 1</label>

                <input type='radio' id='option2' onSelect={setCorrect}/>

                <label htmlFor='option2'>Label 2</label>

                <input type='radio' id='option3' onSelect={setCorrect}/>

                <label htmlFor='option3'>Label 3</label>

            </fieldset>

        </div>

    )

}

Result.tsx（只是为了完成 - 到目前为止工作正常）

import React from 'react'

export type ResultType = 'pending' | 'correct' | 'wrong'

interface Props {

    result: ResultType

}

export const Result = ({ result }: Props) => {

    switch (result) {

        case 'pending':

            return <h2>Make a guess</h2>

        case 'correct':

            return <h2>Yay, good guess!</h2>

        case 'wrong':

            return <h2>Nope, wrong choice...</h2>

    }

}

知道吗，如何从 Options.tsx 更新 useState？

先感谢您！

Answer 1

这非常简单 - 您只需要通过属性将 setter 传播到选项。<Options&nbsp;setResult={setResult}&nbsp;/>或者，根据情况提供您自己的使用 setResult 的方法。我会注意到您当前传递给 onSelect 的值似乎绑定到不正确的值。Typescript 编译器可能在抱怨它？

Answer 2

您可以将更新程序功能传递给选项组件：<Options&nbsp;setResult={setResult}&nbsp;/>然后在您的选项组件中，您可以使用props.setResult('blah')

Answer 3

只需将setResultprop 传递给 Options 组件即可。应用程序.tsx：function App() {&nbsp; &nbsp; const [result, setResult] = useState<ResultType>('pending')&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <header className="App-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Options onSelect={props.onSelect} setResult={setResult} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Result result={result} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}选项.tsx：export const Options = ({onSelect, setResult}: Props) => {&nbsp; &nbsp; const setWrong = () => setResult('wrong');&nbsp; &nbsp; const setCorrect = () => setResult('correct');&nbsp; &nbsp; ...}