리액트에서 div안의 value값은 사용못하나요?

[고진규]

<textarea className='text1' placeholder="코드써라." id='code' value={code} onChange={(e) => setCode(e.target.value)} />

 

이런식으로 버튼을 누르면 value를 api로 보내는걸 성공해서 

----------------------------------------------------------------------------------------------------

const [language_name, setLanguage_name] = useState("PYTHON")

const [language, setLanguage] = useState(0)

<div className="col dropdown-item" id='language' onClick={() => { setLanguage_name('PYTHON'); setLanguage(0); }} value={language}>PYTHON</div>

위와 똑같이  div를 누르면 데이터에 api로 전송할려고했는데

value가 안가는거같습니다.  다른 방법이 있을까요?

[codingapple]

value 속성은 <input> 류에만 사용가능합니다

state에 이미 저장된데이터같은데 굳이 value에 넣어둘 필요가 있을까요

[고진규]

app.js 에

const [language, setLanguage] = useState(0)

있고

 

aa.js에

function MakeFunc(props) {
const Bearer="Bearer "
const code = document.getElementById("code");
const function_name = document.getElementById("function_name");
axios({
method: "POST",
headers:{
Authorization: Bearer+localStorage.getItem("ac-token")
},
url: "비밀",
data: {
"code": code?.value,
"function_name": function_name?.value,
"language":############################<- 이부분에 들어가야하는데 어떻게 해야할지 모르겠습니다..
}
}).then((res) => {
console.log(res);
console.log(props.language)
}).catch(error => {
console.log(error);
console.log(props.language)
});
}
export default MakeFunc;

 

props를 써야할거같은데

 

app.js에

<aa language={language}/>를 해봤는데 그냥 흰화면이 나와서..

[고진규]

props는 부모 자식관계에 쓰는걸로아는데 제가 지금쓸려는 상황은 부모자식관계가 아닌거같은데 어떻게해야하나요?

[codingapple]

MakeFunc 함수는 컴포넌트가 아니라 일반함수같은데 

MakeFunc(language)

이러면 파라미터로 원하는 변수 함수안으로 전송가능합니다

함수안에선 props 출력해보면 language 값이 나오겠군요 

[고진규]

 

a.js

function Translation() {

const [language_name, setLanguage_name] = useState("PYTHON")
const [language, setLanguage] = useState(0)
return (

<div className="col dropdown-item" onClick={() => { setLanguage_name('RUBY'); setLanguage(3); }} >RUBY</div>
<div className="col dropdown-item" onClick={() => { setLanguage_name('GO'); setLanguage(4); }} >GO</div>
<div className="col dropdown-item" ></div>
}

 

makeFunc.js

function MakeFunc(language) {
const Bearer="Bearer "
const code = document.getElementById("code");
const function_name = document.getElementById("function_name");
axios({
method: "POST",
headers:{
Authorization: Bearer+localStorage.getItem("ac-token")
},
url: "비밀 ",
data: {
"code": code?.value,
"function_name": function_name?.value,
"language":language.  ->수정
}
}).then((res) => {
console.log(res);
 
}).catch(error => {
console.log(error);

});
}
export default MakeFunc;

 

이런식 맞나요..?  제가이해를 못했습니다 ㅠ.ㅠ.

[codingapple]

네 이제 버튼누르면 MakeFunc(서버로보낼값); 실행하면 되겠군요

[글쓴이]

글