Question

当前，我有一个类组件，其中包含一些功能组件，这些功能组件显示了来自功能组件的日期选择器但我想在父类组件中获取选定的值我的代码是类组件

export default class TransactionHistory extends React.Component {
    constructor(props) {
        super(props)
      }
      state = {
         Participant :'' ,
         DateFrom :'' }
 render() {

        return (
<View style={styles.PageContainer}>
               <Test  />
</View>
)}
}

功能组件

 export default function date() {
      const [date, setDate] = useState(new Date());
      const [mode, setMode] = useState('date');
      const [show, setShow] = useState(false);
     
      const onChange = (event, selectedDate) => {
        alert(selectedDate)
      };
    const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
      };
       const showDatepicker = () => {
        showMode('date');
      };
      const showTimepicker = () => {
        showMode('time');
      };
      return (
        <View>
          <View>
            <Button onPress={showDatepicker} title="Show date picker!" />
          </View>
          <View>
            <Button onPress={showTimepicker} title="Show time picker!" />
          </View>
           {show && (  
            <DateTimePicker
              testID="dateTimePicker"
               value={date}
               mode={mode}
                 is24Hour={true}
               display="default"
               onChange={onChange}
            
                      
            />
            )}   
        </View>
      );
    };

请帮助我

Answer 1

class TransactionHistory extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    Participant: '',
    DateFrom: '',
    TestValue: '',
  };
  render() {
    return (
      <View style={styles.PageContainer}>
        <Text>{this.state.TestValue} </Text>
        <Test
          callback={(someValue) =>
            this.setState({ ...this.state, TestValue: someValue })
          }
        />
      </View>
    );
  }
}

const Test: React.FC = ({ callback }) => {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
      callback(someValue);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };
  const showDatepicker = () => {
    showMode('date');
  };
  const showTimepicker = () => {
    showMode('time');
  };
  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

如何从React Native的类组件中的功能组件获取道具

1 个答案: