Блог

Я работал над собственным проектом React.

• Для export default function App() ВСТАВКИ от 1 до 3 (в коде) работает.
• export default class App extends Component Ни для одной из работ ВСТАВКИ.
• Я должен объединить их, так как модальный дает пользователю возможность вставлять текст внутри модального, а затем обрабатывать данные для консоли.войдите в систему и оттуда используйте данные.

 export default class App extends Component {
{/* INSERT 1 before render also gives error */}
render () { 
{/* INSERT 1 */}
const [list, setList] = useState();
    const HandleAddList = () => {
      console.log(list);
{/* INSERT 1 END */}
return (
      <View>
      <Modal
            animationType = {"slide"}
            transparent={false}
            visible={this.state.isVisible}>
              <View  style={styles.ModalContext}>
                <View  style={styles.ModalNavigation}>
              <Text style={[styles.closeText, styles.navText]}
                        onPress={() => {
                          this.displayModal(!this.state.isVisible);
                          }
                        }> Cancel </Text>
              <Text style = {[styles.navHeader, styles.navText] }>
                  New</Text>
                  
                  <Text style={[styles.doneText, styles.navText]}
                        onPress={() => {
                          this.displayModal(!this.state.isVisible);
{/* INSERT 2 */}
                          HandleAddList();
{/* INSERT 2 */}
                          }
                        }> Done </Text>
              </View>
              <TextInput
                style={styles.inputText}
                placeholder='Enter Something...'
{/* INSERT 3 */}
                value = {list}
                onChangeText={text => setList(text)}
{/* INSERT 3 */}
                autoFocus
              />
              </View>
          </Modal>
{/* Rest of the code */}
</View>
{/* const stylesheets etc. */}
 

Документация React-native сообщила мне, что я не могу использовать const внутри компонента класса. (https://reactjs.org/warnings/invalid-hook-call-warning.html).

• ВСТАВКА-комментарии были только для целей вопроса, и тестирование проводилось без него…
• Все необходимые модули были импортированы из «react-native»

Есть какие-нибудь решения? Буду признателен, если кто-нибудь сможет помочь…

Вы не можете использовать крючки для компонентов класса, это только функция функциональных компонентов. Вместо этого вы могли бы использовать это,я не совсем уверен в некоторых вещах, но вы можете исправить ошибки:

 import styles from './styles.css'

export default function App() {
  const [list, setList] = useState();
  const [isVisible, setIsVisible] = useState(true);
  
  const HandleAddList = () => {
    console.log(list);
  }
  
  return (
    <View>
      <Modal
        animationType={"slide"}
        transparent={false}
        visible={isVisible}>
        <View style={styles.ModalContext}>
          <View style={styles.ModalNavigation}>
            <Text style={[styles.closeText, styles.navText]}
              onPress={() => {
                setIsVisible(!isVisible);
              }
              }> Cancel </Text>
            <Text style={[styles.navHeader, styles.navText]}>
              New</Text>

            <Text style={[styles.doneText, styles.navText]}
              onPress={() => {
                setIsVisible(!isVisible);
                HandleAddList();
              }
              }> Done </Text>
          </View>
          <TextInput
            style={styles.inputText}
            placeholder='Enter Something...'
            value={list}
            onChangeText={text => setList(text)}
            autoFocus
          />
        </View>
      </Modal>
    </View>
  )
}
 

Я не привык к компонентам класса, но я думаю, что это может помочь вам:

     export default class App extends Component {

  constructor() {
    super()
    this.state = {
      isVisible: true,
      list: ""
    }
  }

  HandleAddList () {
    console.log(this.state.list);
  }

  render () {

    return (
      <View>
        <Modal
          animationType={"slide"}
          transparent={false}
          visible={this.state.isVisible}>
          <View style={styles.ModalContext}>
            <View style={styles.ModalNavigation}>
              <Text style={[styles.closeText, styles.navText]}
                onPress={() => {
                  this.setState({...this.state, isVisible: !this.state.isVisible});
                }
                }> Cancel </Text>
              <Text style={[styles.navHeader, styles.navText]}>
                New</Text>
  
              <Text style={[styles.doneText, styles.navText]}
                onPress={() => {
                  this.setState({...this.state, isVisible: !this.state.isVisible});
                  this.HandleAddList();
                }
                }> Done </Text>
            </View>
            <TextInput
              style={styles.inputText}
              placeholder='Enter Something...'
              value={this.state.list}
              onChangeText={text => this.setState({ ...this.state, list: text})}
              autoFocus
            />
          </View>
        </Modal>
      </View>
    )

  }

}
 

Это так важно, чтобы вы прочитали документацию (https://es.reactjs.org/docs/state-and-lifecycle.html) самостоятельно, здесь есть пара вещей, которые вы могли бы исправить, прочитав это. В любом случае, мне приятно помочь, надеюсь, это сработает для вас.