получить значение флажка в реагирующем - PullRequest
Новая
       7

получить значение флажка в реагирующем

0 голосов
/ 03 июля 2018

Я использую флажок модуля native-base и пытаюсь получить доступ к значению флажка, но я не получил. Как я могу получить доступ к значению? Может кто-нибудь помочь мне восстановить значение флажка, я новичок в React-native.

Код: 

onHandlechange = (e) => {
alert('&&&&&&&' + e.target.value);
}   
 <Text>Hobbies:</Text>
   <ListItem>
       <CheckBox checked={false} value="Music" color="green" onPress={this.onHandlechange.bind(this)}/>
                    <Body>
                            <Text>Music</Text>
                    </Body>
            </ListItem>
            <ListItem>
                    <CheckBox checked={false} value="Movie" color="green" onPress={this.onHandlechange.bind(this)} />

                    <Body>
                            <Text>Movie</Text>
                    </Body>
            </ListItem>
            <ListItem>
                    <CheckBox checked={false} value="Reading" color="green" onPress={this.onHandlechange.bind(this)} />
                    <Body>
                            <Text>Reading</Text>
                    </Body>
            </ListItem>
            <ListItem>
                    <CheckBox checked={false} value="Outing" color="green" onPress={this.onHandlechange.bind(this)} />
     <Body>
    <Text>Outing</Text>
     </Body>
     </ListItem>
    <ListItem>
    <CheckBox checked={false} value="Sports" color="green" onPress={this.onHandlechange.bind(this)} />
     <Body>
     <Text>Sports</Text>
     </Body>
     </ListItem>

1 Ответ

0 голосов
/ 03 июля 2018

Вместо установки checked={false} вы можете сохранить, если он установлен или нет, в вашем state и просто перевернуть его, когда нажата CheckBox.

Этот обычный пример React использует onChange вместо собственного эквивалента React onPress, но это тот же принцип. 

class App extends React.Component {
  state = { checked: false };
  
  handleChange = () => {
    this.setState(previousState => {
      return { checked: !previousState.checked };
    })
  }
  
  
  render() {
    return (
      <input
        type="checkbox"
        checked={this.state.checked}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
...