Как мне получить значение нажатой кнопки, которая находится в списке кнопок

Question

Этот код находится внутри функционального компонента: select (функция onclick) продолжает печатать undefined, я использовал const [selected, setchosen] = useState ([]) Вот полный код. Все правильно импортировано. Идея в том, что я хочу владелец сообщения, чтобы иметь возможность выбрать кандидата, подавшего заявку на публикацию ................................. .................................................. .................................................. .................................................. .................................................. .................................................. .....

const Details = () => {
    const { key } = useParams();
    console.log(key)

    const [loading, setLoading] = useState(true);
    const [details, setDetails] = useState({});
    const [userid, setuserid] = useState([]);
    const [sameuser, setSameuser] = useState(false)
    const [pressed, setpressed] = useState(false)
    const [pressed2, setpressed2] = useState(false)
    const [chosen, setchosen] = useState([])
    useEffect(() => {


        var docRef = db.collection("Quests").doc(key);

        docRef.get().then(function (doc) {
            if (doc.exists) {
                console.log("Document data:", doc.data());
                setDetails(doc.data());
                setLoading(false)


            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch(function (error) {
            console.log("Error getting document:", error);
        });


    }, []);
    if (loading) {
        return <div className="Quests">Still loading...</div>;
    }
    auth.onAuthStateChanged((user) => {
        if (user) {
            setuserid(user.uid)
        }
        userid == details.ownerId ? (
            setSameuser(true)) : (
                console.log("not same user")
            )
    });
    let button;
    const AddCandidate = e => {
        var docRef = db.collection("Quests").doc(key)
        let currCandidates = details.candidates;
        currCandidates.push(userid)
        docRef.set({
            candidates: currCandidates
        }, { merge: true });
        setpressed(true)
    }
    let candidatelist
    const Pickuser = () => {
        console.log("hi", details.candidates)
        setpressed2(true)
    }
    const choose = (value) => {
        // console.log("hi")
        // // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol>
        // // setpressed2(true)
        console.log(chosenvalue)
        setchosen(chosenvalue)
        console.log(chosen)
    }
    if (sameuser) {
        if (pressed2) {
            var chosenvalue
            button = <Button onClick={Pickuser}>Pick user</Button>
            candidatelist = <ol>{details.candidates.map(details => <Button value={chosenvalue} onClick={choose} >{details}</Button>)}</ol>

        }
        else {
            button = <Button onClick={Pickuser}>Pick user</Button>
            candidatelist = <h1></h1>

        }

    } else {

        if (pressed) {
            button = <h1>Thanks for applying</h1>
            console.log("pressed")
            candidatelist = <h1></h1>

        }
        else {
            button = <Button onClick={AddCandidate}>Apply</Button>
            candidatelist = <h1></h1>

        }
    }

    return (
        <div>
            <h1>{details.title}</h1>
            <h2>{details.detailspara}</h2>
            <h3> {details.Category}</h3>
            <h3>{details.picofquest}</h3>
            <img
                src={details.url}
                alt="Uploaded Images"
                height="300"
                width="400"
            />
            <h3>${details.price}</h3>
            <h3>{details.time}</h3>
            <h3>{details.ownerId}</h3>
            <h3>{userid}</h3>
            {button}
            {candidatelist}

        </div>

    )

}
export default Details;

Answer 1

если функция передана обработчику события, объект события передается функции. Самый простой способ получить значение при нажатии кнопки - это следующий код

<Button 
  onClick={() => someFunction(value)}
>
  Button Text
</Button>

https://reactjs.org/docs/events.html#overview https://reactjs.org/docs/handling-events.html

const choose = (value) => {
  // console.log("hi")
  // // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol>
  // // setpressed2(true)
  console.log(chosenvalue)
  setchosen(chosenvalue)
  console.log(chosen)
}

в этой функции выбора выводится значение undefined, потому что chosenvalue не определено и эта переменная не объявила область действия функции выбора.

исправить проблема

if (pressed2) {
  button = <Button onClick={Pickuser}>Pick user</Button>
  candidatelist = (
    <ol>
     {details.candidates.map(details => 
       // pass appropriate value as parameter what you want to get when the button is clicked. detail or value.
       <Button onClick={() => choose(details)}>
         {details}
       </Button>
      )}
    </ol>
  )
}
...

const choose = (value) => {
  console.log(value);
  setchosen(value);
}

другой способ - использовать текущую цель из переданного события Syntheti c

const choose = (event) => {
  const { currentTarget: { value } } = event;
  console.log(value)
  setchosen(value)
}

Answer 2

Первым аргументом, переданным обработчику событий, является объект события , а не значение.

Вы можете использовать currentTarget, чтобы получить кнопку.

Тогда это свойство value даст вам значение.

const choose = (event) => {
  const button = event.currentTarget;
  const value = button.value;
  // …