如何仅在反应挂钩中更改单击按钮的状态

Question

如何改变点击按钮的状态。现在它正在将页面中所有接受按钮的状态更改为 Save。我试过传id，不行

https://codesandbox.io/s/frosty-chihiro-s4v1cc?file=/src/styles.css

const [processRequest, setProcessRequest] = useState("Accept");
    const processRequestData = (e) => {
        const text = "Save";
        setProcessRequest(text,e.target.id);
      };

<section class="col1">

            {
                        searchResults.map(({id, name, mobile}) => (

                        <div className='row'>
                            <div className="playerRow"> 
                                <label key={id}>
                                    <div className="row">
                                        <div className="checkStyle1">
                                            <input type="checkbox"></input>
                                        </div>
                                        <div className="plyName">
                                            <span>{name}</span>
                                        </div>
                                        <div className="plyMobile">
                                            <span>{mobile}</span>
                                        </div>
                                        <div className="checkStyle2">
                                            <input type="checkbox"></input>
                                            <label>Member</label>
                                        </div>
                                        <div className="checkStyle3">
                                            <input type="checkbox"></input>
                                            <label>Active Player</label>
                                        </div>
                                        <div className="btnStyle4">
                                            <button type="button" onClick={ () => processRequestData(e)}>{processRequest}</button>
                                        </div>
                                        <div className="btnStyle4">
                                            <input type="button" value="Decline Request"></input>
                                        </div>
                                    </div>
                                </label>
                            </div>  
                            
                        </div>
                       
                   ))} 
            </section>

Answer 1

setProcessRequest 只接受一个参数。 https://reactjs.org/docs/hooks-state.html

您需要跟踪所点击项目的状态，例如将搜索结果的映射 ID 映射到切换状态。

Answer 2

您为每个按钮使用相同的变量 processRequest。您可以为 data 中的每个元素创建数组，这样这个数组（比方说 buttonNames）将如下所示：["Accept"、"Save"、"Accept"、"something"、... ] 在 onClick 中的 .map 中的 jsx 中，您会将索引传递给 processRequestData 并通过该索引更改 buttonNames 中的值。按钮的呈现值将通过索引从 buttonNames 中获取，例如 {buttonNames[index]}.

Answer 3

我已经为您修复了，您正在为所有数组项更新相同的字符串变量。

const data = [
  {
    id: 1,
    name: "Danile Victor",
    mobile: "3423224232",
    processRequest: "Accept"
  },
  {
    id: 2,
    name: "Sam Philip",
    mobile: "2312312310",
    processRequest: "Accept"
  },
  {
    id: 3,
    name: "Von Rodriguz",
    mobile: "5678999010",
    processRequest: "Accept"
  },
  {
    id: 4,
    name: "Style Dorkin",
    mobile: "7896543212",
    processRequest: "Accept"
  },
  {
    id: 5,
    name: "Rad",
    mobile: "7009943212",
    processRequest: "Accept"
  }
];

export default function App() {
  const [acceptPlayer, setAcceptPlayer] = useState("Accept");
  const [requestList, setRequestList] = useState([]);
  const [searchResults, setSearchResults] = useState([]);
  const [processRequest, setProcessRequest] = useState("Accept");

  useEffect(() => {
    setRequestList(data);
  }, []);
  const processRequestData = (e) => {
    setRequestList(
      requestList.map((r) => {
        if (r.id === e) {
          r.processRequest = "Save";
        }
        return r;
      })
    );
  };

  return (
    <div className="App">
      <section className="col1">
        {requestList.map(({ id, name, mobile, processRequest }) => (
          <div className="row">
            <div className="playerRow">
              <label key={id}>
                <div className="row">
                  <div className="checkStyle1">
                    <input type="checkbox"></input>
                  </div>
                  <div className="plyName">
                    <span>{name}</span>
                  </div>
                  <div className="plyMobile">
                    <span>{mobile}</span>
                  </div>
                  <div className="checkStyle2">
                    <input type="checkbox"></input>
                    <label>Member</label>
                  </div>
                  <div className="checkStyle3">
                    <input type="checkbox"></input>
                    <label>Active Player</label>
                  </div>
                  <div className="btnStyle4">
                    <button
                      type="button"
                      onClick={(e) => processRequestData(id)}
                    >
                      {processRequest}
                    </button>
                  </div>
                  <div className="btnStyle4">
                    <input type="button" value="Decline Request"></input>
                  </div>
                </div>
              </label>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}

如何仅在反应挂钩中更改单击按钮的状态

How can I change the state of clicked button only in react hooks

reactjs

react-hooks