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

Question

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

我想我差不多明白了，但我没能把正确的 'onSelect' 属性传递给 Options.tsx 所以更新了。

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

App.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;

Options.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

您可以将更新程序函数传递给选项组件：

<Options setResult={setResult} />

然后在您的选项组件中您可以使用

props.setResult('blah')

Answer 2

只需将 setResult 属性传递给 Options 组件即可。

App.tsx:

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

    return (
        <div className="App">
            <header className="App-header">
                <Options onSelect={props.onSelect} setResult={setResult} />

                <Result result={result} />
            </header>
        </div>
    );
}

Options.tsx:

export const Options = ({onSelect, setResult}: Props) => {
    const setWrong = () => setResult('wrong');
    const setCorrect = () => setResult('correct');
    ...
}

Answer 3

这很简单 - 您只需要通过属性将 setter 传播到选项。

<Options setResult={setResult} />

或者，根据情况提供您自己的使用 setResult 的方法。

我会注意到您当前传递给 onSelect 的值似乎绑定到一个不正确的值。 Typescript 编译器可能会抱怨它？

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

How to modify react useState from secondary File

javascript

reactjs

use-state