如何獲取按鈕列表中我按下的按鈕的值

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

如果 function 傳遞給事件處理程序，則事件 object 將傳遞給 function。 單擊按鈕時獲取價值的最簡單方法就像下面的代碼

<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打印未定義，因為選擇值未定義且此變量未聲明選擇函數的 scope。

解決問題

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

傳遞給事件處理程序的第一個參數是事件 object ，而不是值。

您可以使用currentTarget來獲取按鈕。

然后它的value屬性會給你價值。

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