标签: react-bootstrap

我尝试在输入文本中获取值，并使用 react-bootstrap 将其添加到文本区域。

我知道我必须使用 ReactDOM.findDOMNode 来获取 ref 的值。我不明白出了什么问题。

这是我的代码：

import React from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import { InputGroup, FormGroup, FormControl, Button} from 'react-bootstrap';
import './App.css';
class InputMessages extends React.Component {
constructor(props) { 
super(props);
this.handleChange =      this.handleChange.bind(this); 
    this.GetMessage= this.GetMessage.bind(this); 
this.state = {message: ''};
}   
handleChange(event)
{    
this.setState({message: this.GetMessage.value});
}
GetMessage()
{   
return ReactDOM.findDOMNode(this.refs.message     );
 }
 render() {
    var message = this.state.message;
    return(
 <FormGroup > 
 <FormControl
 componentClass="textarea" value={message} />
 <InputGroup> 
 <FormControl type="text" ref='message' /> 
    <InputGroup.Button>
    <Button …

我正在尝试使用地图渲染多个 react-bootsrap 模态，但我无法这样做。使用我当前的代码，单击“查看详细信息”按钮会同时激活所有模态，而不是打开相关的模态。这是我与模态相关的代码片段：

  render() {
    const { accounts } = this.props;
    const displayAccounts = Object.keys(accounts).filter(key => {
      return accounts[key].info.type === 'student'
    }).map(key => {
      return (
        <tr key={key}>
          <th>{accounts[key].info.name}</th>
          <td>{accounts[key].info.email}</td>
          <td><Button bsStyle='danger' onClick={() => this.props.removeAccount(key)}>Remove Account</Button></td>
          <td>
            <ButtonToolbar>
              <Button id={key} bsStyle="primary" onClick={this.showModal}>View Details</Button>
              <Modal
                id={key}
                show={this.state.show}
                onHide={this.hideModal}
              >
                <Modal.Header closeButton>
                  <Modal.Title>Student Details</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <Table responsive striped hover>
                    <thead>
                      <tr>
                        <th>Title</th>
                        <th>Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th>Name</th>
                        <td>{accounts[key].userDetails.name}</td>
                      </tr>
                      <tr>
                        <th>Education</th>
                        <td>{accounts[key].userDetails.education}</td>
                      </tr>
                      <tr>
                        <th>GPA</th>
                        <td>{accounts[key].userDetails.gpa}</td>
                      </tr>
                      <tr>
                        <th>Skills</th>
                        <td>{accounts[key].userDetails.skills}</td> …

全新的 React Bootstrap，我一直在尝试为组件添加一些自定义样式。

我能够通过使用 chrome 检查器查找类名来从 Nav 中删除边框半径，但是我无法为我的 NavItems 添加悬停效果。

这是我的组件。

 <Navbar inverse collapseOnSelect className="nav-bar">
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">efrt</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Features</NavItem>
        <NavItem eventKey={2} href="#">Who we Are</NavItem>
      </Nav>
      <Navbar.Form pullRight>
        <UniversalButton style="primary" name='Login' />
      </Navbar.Form>
      <Nav pullRight>
        <NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
          <MenuItem eventKey={3.3}>Member</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Coach</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

从 Chrome 检查器复制，我得到以下作为我想要进行更改的类/元素

.navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d;
} 

当我尝试以下操作时，没有任何反应。我尝试添加自定义类名也没有效果。

.navbar-inverse.navbar-nav>li>a:hover {
    background: grey;
} 

任何帮助表示赞赏:)！

我正在尝试使用 react-bootstrap 来设计网页样式。

包.json

{
  "name": "chrome-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.16"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-bootstrap": "^0.31.5"
  }
}

应用程序.js

import React from 'react';
import { Button } from 'react-bootstrap'

function CheckState(props){
    function handleClick(e){
        console.log(props.state)
    }
    return(
        <Button bsStyle="primary" onClick={handleClick}>Click for state</Button>
    )
}

但是，这是我刷新时在网页上看到的内容：

看起来好像没有添加样式。我究竟做错了什么？

我在我的项目中使用 react-bootstrap。使用 Modal 组件时出现如下错误。

模态组件：

<Modal  show={this.state.modalshow} onHide={close}  container={this} aria-labelledby="contained-modal-title">
   <Modal.Header closeButton>
     <Modal.Title id="contained-modal-title">Add User</Modal.Title>
   </Modal.Header>

我找不到有关如何使用 react-bootstrap 为单选按钮调用 onChange 的文档。我省略了提交表单的按钮。它适用于所有其他领域，例如文本输入，所以我忽略了它。

对于每个，teacherRate 和 totalRate，每个单选按钮的值分别为 1、2、3，但我不确定如何将其绑定。

我也知道我不能让每个类别的值都相同。

我不打算做按钮组。

我在网上寻找类似的答案，但找不到任何答案。有一个人像我一样发布了他们的问题，但后来回答说他实现了 react-bootstrap 但没有发布他的解决方案。积分不够，无法回复。

    class Assignment extends Component {

      constructor(props){
        super(props)
        this.state = {
          form: {
            teacherRate: '',
            overallRate: ''
          }
        }
      }

      handleChange(event){
        const formState = Object.assign({}, this.state.form)
        formState[event.target.name] = event.target.value
        this.setState({form: formState})
      }

      render() {
        return (
          <Grid>
            <form>

              <FormGroup>
                <ControlLabel id='adminRate'>Rate the Teacher</ControlLabel>
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>1</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>2</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>3</Radio>{' '}
              </FormGroup>

              <FormGroup>
                <ControlLabel …

使用NavDropdownin react-bootstrap，我无法设置其颜色或背景颜色的样式...

<NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" >
  <LinkContainer to="/about">
    <MenuItem eventKey={3.1} className="text-center">About</MenuItem>    
  </LinkContainer>
  <MenuItem divider />
  <LinkContainer to="/products">
    <MenuItem eventKey={3.2} className="text-center">Products</MenuItem>    
  </LinkContainer>      
  <MenuItem divider />
  <LinkContainer to="/blog-index">
    <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem>    
  </LinkContainer>
</NavDropdown>

我可以使用 更改字体大小style={{ fontSize: '130%' }}，但我还想使用 ..

style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }}

...但color并backgroundColor没有在括号内工作。

我尝试做的一件事是将<NavDropdown>元素包装在一个 style 中div，但这会弄乱 Navbar 元素的对齐方式。

我有一个下拉按钮，但是，它的（动态更改的）标题可能太长而无法容纳。因此，我想知道是否有办法将太长的标题自动换行到第二行？

  <Panel >
       <Panel.Body collapsible>

           <ButtonGroup vertical >

                    dsadas
                    <DropdownButton title="Dropdown2re12r412r12r12r2r2">
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>
                    fwf21
                    <DropdownButton title="Dropdown" >
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>

            </ButtonGroup>
        </Panel.Body>
    </Panel>

编辑：添加截图

标签不显示内容并且标签上没有样式

选项卡没有显示内容，这是代码。我该如何解决这个问题？

我究竟做错了什么？

这段代码几乎与 react-bootstrap 页面上的代码相似

//simple tabs.js

import React, {Component} from 'react';
import {Tabs, Tab} from 'react-bootstrap';
import TabItem from './TabItem';
import data from './data'

class SimpleTabs extends Component{

    constructor(props){
        super(props);
        this.state = {
            key: 1 | props.activeKey
        }
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect (key) {
        console.log("selected " + key);
        this.setState({key})
    }
    render(){
        return (
             <Tabs
            activeKey={this.state.key}
            onSelect={this.handleSelect}
            id="controlled-tab-example"
            >
                <Tab eventKey={1} title="Tab 1">
                Tab 1 content
                </Tab>
                <Tab eventKey={2} title="Tab 2">
                Tab 2 content
                </Tab>
                <Tab eventKey={3} title="Tab …

我正在使用 ReactStrap 的 ButtonGroup 和 Button。当您单击其中一个按钮时，我设置了一个 onClick 函数：

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

但是当我加载页面时，这就是我得到的：

在我什至点击按钮之前。如果我点击它，控制台中什么也没有。有任何想法吗？