react-hooks

问题 I want to bundle some data together with a component. Here is an example of a SFC that has a property called name. I do not want to use the property name with the component named MyFormTab . Instead I would like to access this property from the parent component and assign it to be displayed within the parent. const MyFormTab = (props) => { const name = props.name return ( <> <div className='flex-center-col'> <input type='email'></input> <input type='text'></input> </div> </> ) } I would then

问题 I have this code in React, where I would like a count down session/break timers to alternate when the clock on the screen reaches 0. The problem I am having is that when I don't include clockTime as a dependency in the useEffect hook function, the timers count every 1 second correctly (I suppose), however, the clockTime state variable isn't updated, so the current clock time will never be 0, and the current session will keep counting down below 0. On the other hand, when I include clockTime

问题 I'm updating in useEffect by pushing data to the old state object and return it as a value. This code is actually changing the _series variable from useState(), yet no re-rendering takes place, why? import { TimeSeries, Pipeline, Stream, EventOut, TimeEvent, TimeRange } from "pondjs"; export default () => { const [_series, $series] = useState(()=>{ let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}} for(let i=10; i >= 0; i--){state.data.points.push( [new

问题 I'm having problem to type the following custom React hook , I'm new to TypeScript and this is causing some confusion. const useStateCallback = (initialState: any) => { const [state, setState] = useReducer<Reducer<any, any>>((state, newState) => ({ ...state, ...newState }), initialState) const cbRef = useRef(null) const setStateCallback = (state, cb) => { cbRef.current = cb setState(state) } useEffect(() => { if (cbRef.current) { cbRef.current(state) cbRef.current = null } }, [state]) return

问题 From what i understood from React documentation and other material across web, useCallback is used to avoid re-rendering of child component by ensuring that memoized version of callback is passed to it, thus referentially props remain same for child component. But all this is valid only if I am using React.memo on child component. Without React.memo, child component would re-render anyways. My question is what use is useCallback in this case i.e. without React.memo applied to child component.

问题 The size.value state is one option behind when the _updateData function triggers onChange of the <select> . For example, Let's say the starting defaultValue option of <select> is "All", locations is empty...the option is changed to "Medium", locations is "All"...the option is changed to "Large", locations is "Medium"...and so on. Initially I want the _updateData function to run onload with "All" selected which is not working either, it throws the error Cannot read property 'target' of

问题 in react.js i add a name attribute to each element For example: handleChange1(event) { const {name, value} = event.target this.setState({[name]: value}); } <input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} /> But how do I do that in react-hook? for example: <Input name="FirstName" onChange={onChangeFirstName} ></Input> const onChangeFirstName = (event) => { setFirstName(event.target.value); }; In fact, my question is, if I have multiple inputs, how can

问题 in react.js i add a name attribute to each element For example: handleChange1(event) { const {name, value} = event.target this.setState({[name]: value}); } <input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} /> But how do I do that in react-hook? for example: <Input name="FirstName" onChange={onChangeFirstName} ></Input> const onChangeFirstName = (event) => { setFirstName(event.target.value); }; In fact, my question is, if I have multiple inputs, how can

问题 in react.js i add a name attribute to each element For example: handleChange1(event) { const {name, value} = event.target this.setState({[name]: value}); } <input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} /> But how do I do that in react-hook? for example: <Input name="FirstName" onChange={onChangeFirstName} ></Input> const onChangeFirstName = (event) => { setFirstName(event.target.value); }; In fact, my question is, if I have multiple inputs, how can

问题 in react.js i add a name attribute to each element For example: handleChange1(event) { const {name, value} = event.target this.setState({[name]: value}); } <input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} /> But how do I do that in react-hook? for example: <Input name="FirstName" onChange={onChangeFirstName} ></Input> const onChangeFirstName = (event) => { setFirstName(event.target.value); }; In fact, my question is, if I have multiple inputs, how can