Question

我正在使用基于本机的模块的Checkbox，并尝试访问checkbox的值，但没有得到。如何访问该值？谁能帮助我获取复选框值，我是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>

Answer 1

除了设置5px之外，您还可以将是否选中了checked={false}存储在state中，并在按下CheckBox时将其翻转。

这个常规的React示例使用onChange而不是等效的React Native 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>

获取react-native中的复选框值

1 个答案: