React 후크를 사용하여 여러 입력에서 무작위로 하나의 값을 표시하는 방법
엘리엇
두 개의 입력 필드와 제출 버튼이 있습니다. 값이 입력에 기록되고 제출 될 때마다 입력 값 중 하나만 무작위로 표시됩니다.
예:
모든 값을 출력하는 대신 무작위로 하나만 인쇄해야하며 제출을 클릭 할 때마다 입력에서 다른 임의 값이 나타납니다. 이를 위해 어떻게 든 값을 저장해야한다고 생각하므로 제출할 때마다 양식이 비어 있지 않습니다.
이것이 내가 지금 처리하는 방법입니다.
const [values, setValues] = useState([]);
const addValue = (input1, input2, input3, input4) => {
setValues([...values, {input1, input2, input3, input4 }])
}
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [input3, setInput3] = useState('');
const [input4, setInput4] = useState('');
const handleSubmit = (e) => {
e.predeventDefault()
addValue(input1);
setInput1('');
addValue(input2);
setInput2('');
addValue(input3);
setInput3('');
addValue(input4);
setInput4('');
}
그리고 내 견해 :
{values.map(value => {
return( <li key={value.input1}></li>)
})}
<form onSubmit={handleSubmit}>
<input type="text" value={input1} onChange={(e) => setInput1(e.target.value )}/>
// the same repeated with input2, input3,....
내 질문은 내 솔루션을 어떻게 처리 할 수 있습니까? 나는 반응이 처음이고 그것을 처리하는 최선의 방법을 알지 못합니다.
잘랄
코드를 기반으로 한 가장 간단한 솔루션은 다음과 같습니다.
const addValue = (input1, input2, input3, input4) => {
// You don't have to make an object
setValues([input1, input2, input3, input4]);
};
const handleSubmit = e => {
e.preventDefault();
addValue(input1, input2, input3, input4);
};
// a function to generate random numbers between 0 and 3
const generateRandomNumber = () => {
return parseInt(Math.random() * 4, 10);
};
그런 다음 values매번 임의의 자식으로 배열을 반환하십시오 . 이렇게 :
{values[generateRandomNumber()]}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
TypeScript에서 후크를 사용하여 React PureComponent에 소품을 입력하는 방법은 무엇입니까?
- 2
onClick으로 array.map, useState, useEffect를 무작위로 사용하여 React에서 항목을 표시하는 방법은 무엇입니까?
- 3
jQuery를 사용하여 여러 <td>에서 <td> 중 하나의 값을 얻는 방법은 무엇입니까?
- 4
나중에 html에서 사용하기 위해 javascript를 사용하여 입력 값을 저장하는 방법
- 5
Angular Material의 여러 입력에서 하나의 지시문을 사용하는 방법은 무엇입니까?
- 6
postgres를 사용하여 열에 여러 값을 표시하는 방법
- 7
PHP를 사용하여 테이블에 여러 입력 배열 값을 표시하는 방법
- 8
ipywidgets를 사용하여 HMTL에서 toogle 버튼의 출력을 표시하는 방법은 무엇입니까?
- 9
하나의 SQL 쿼리를 사용하여 하나의 열에서 여러 값을 업데이트하는 방법은 무엇입니까?
- 10
배열을 사용하여 하나의 입력에서 여러 값을 출력하는 방법은 무엇입니까?
- 11
React (후크)에서 개체의 값을 읽고 표시하기 위해 setState 및 useEffect를 올바르게 사용하는 방법은 무엇입니까?
- 12
if / else 문을 사용하여 여러 div를 표시하거나 숨기는 방법은 무엇입니까?
- 13
react-bootstrap table-2를 사용하여 열의 값을 링크로 표시하는 방법은 무엇입니까?
- 14
LINQ를 사용하여 Dictionary 인스턴스에 여러 값을 입력하는 방법은 무엇입니까?
- 15
SQL에서 여러 필드의 값을 추가하고 Django를 사용하여 그 합계에서 하나를 만드는 방법은 무엇입니까?
- 16
시뮬레이션 값을 사용하여 두 열의 순서를 동시에 1000 번 무작위로 변경하는 방법은 무엇입니까?
- 17
React Hooks를 사용하여 여러 페이지에 중첩 된 경로를 표시하는 방법 ..?
- 18
R을 사용하여 여러 분할 표를 하나로 병합하는 방법은 무엇입니까?
- 19
Bash에서 awk를 사용하여 필드의 여러 값을 반복하는 방법은 무엇입니까?
- 20
Swift를 사용하여 Xcode 6의 numberOfItemsSection에서 여러 값을 전달하는 방법은 무엇입니까?
- 21
매크로를 사용하여 libreoffice calc에서 시트의 버튼을 표시하거나 숨기는 방법은 무엇입니까?
- 22
Keras에서 하나의 출력을 가진 모델의 손실로 여러 변수를 사용하는 방법은 무엇입니까?
- 23
Thymeleaf를 사용하여 하나의 열거 형 값을 표시하는 방법
- 24
ASP.NET에서 여러 입력 값을 사용하여 MySQL 저장 프로 시저를 호출하는 방법
- 25
Python에서 RSA 라이브러리를 사용하여 서명의 실제 값을 표시하는 방법은 무엇입니까?
- 26
React를 사용하여 브라우저에 콘솔 앱을 표시하는 방법은 무엇입니까?
- 27
저장 프로 시저를 사용하여 여러 값을 전달하는 방법은 무엇입니까?
- 28
DOM이로드 된 후 jQuery를 사용하여 선택 입력에서 값을 얻는 방법
- 29
try-except 블록을 사용하여 입력을 확인하고 while 문을 사용하여 Python에서 유효한 입력이 나올 때까지 사용자에게 메시지를 표시하는 방법은 무엇입니까?
몇 마디 만하겠습니다