如何获取按钮列表中我按下的按钮的值

Question

此代码位于功能组件内： 选择（onclick 功能）保持打印未定义， 我使用了 const [chosen, 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)
}

在此选择函数中打印未定义，因为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);
}

另一种方法是使用传递的合成事件中的当前目标

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;
  // …