当按钮被单击时，获取另一个组件内的复选框的值

Question

在这个场景中我有两个组件，父组件App和子组件(Checkbox组件)。当这个复选框被点击或选中时，我在子组件中有一个复选框。

我希望结果只在父组件内单击按钮时显示在控制台上。我目前只有在复选框被选中时才显示在控制台上，这是在子组件内发生的。

import { useState } from "react";
// import Checboxtest from "./Checkboxtest";
import "./styles.css";
// const Person = props => (
const Checboxtest = ()=> {
const [isChecked, setIsChecked] = useState(false);
const [checkboxvalue, setcheckboxvalue] = useState("");
const handleOnChange = (e) => {
setIsChecked(!isChecked);
setcheckboxvalue(e.target.value);
};
return (
<div className="App">
<h1>Checkbox Value </h1>
<input
type="checkbox"
id="Orange"
name="Orange"
value="Orange"
checked={isChecked}
onChange={handleOnChange}
/>
Orange
{isChecked ? console.log(checkboxvalue) : console.log("nill")}
</div>
);
}

export default function App() {
return (
<div className="App">
<h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
<button>See checkbox value</button>
<Checboxtest  />
</div>
);
}

Answer 1

您需要另一个state值来控制此场景。它可以在App组件中实现，也可以在Checkbox组件中实现。

让我们在父组件中实现状态，所以在App组件中定义一个状态:

export default function App() {
// create a state value
const [showResult, setShowResult] = useState(false);
// create handler 
const handleShowResult = () => setShowResult(prevState => !prevState)
return (
<div className="App">
<h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
<button onClick={handleShowResult}>See checkbox value</button>
<Checboxtest  showResult={showResult}/>
</div>
);
}

当你点击按钮时，showResult的值会改变。showResult道具将把复选框结果可见性的状态传递给Checkbbox组件。

现在，在Checkbox: 中实现showResult道具

const Checboxtest = ({showResult})=> {
const [isChecked, setIsChecked] = useState(false);
const [checkboxvalue, setcheckboxvalue] = useState("");
const handleOnChange = (e) => {
setIsChecked(!isChecked);
setcheckboxvalue(e.target.value);
};
return (
<div className="App">
<h1>Checkbox Value </h1>
<input
type="checkbox"
id="Orange"
name="Orange"
value="Orange"
checked={isChecked}
onChange={handleOnChange}
/>
// check showResult value 
Orange
{showResult ? console.log(checkboxvalue) : console.log("nill")}
</div>
);
}

Answer 2

你可以在父组件管理状态即App.js和通过isCheckedchangeCheckBoxValueChecboxtest。这样被选中的值被传播到父值，当你点击按钮时，App.js组件有所有的细节。

App.js

import React, { useState } from 'react';
// import Test from './Test';
import Checboxtest from './Checboxtest';
const App = () => {
const [isChecked, setIsChecked] = useState( false );
const [checkboxvalue, setcheckboxvalue] = useState("nil");
const changeCheckBoxValue = (e) => {
const val = e.target.value;
setIsChecked(state => !state);
isChecked ? setcheckboxvalue("nil"): setcheckboxvalue(val);
}
const seeCheckedValue = () => {
console.log( checkboxvalue )
}
return (
<div>
<div className="App">
<h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
<button onClick={seeCheckedValue}>See checkbox value</button>
<Checboxtest isChecked={isChecked}
changeCheckBoxValue={changeCheckBoxValue}
/>
</div>
</div>
);
};
export default App;

<<p>Checboxtest组件/strong>

const Checboxtest = ( { isChecked, changeCheckBoxValue } ) => {
return (
<div className="App">
<h1>Checkbox Value </h1>
<input
type="checkbox"
id="Orange"
name="Orange"
value="Orange"
checked={isChecked}
onChange={changeCheckBoxValue}
/>
Orange
</div>
);
}
export default Checboxtest