просто установите один флажок в реагирующих - PullRequest
Новая
       10

просто установите один флажок в реагирующих

0 голосов
/ 03 февраля 2019

Как я могу создать метод, когда я нажимаю один флажок, другой флажок не назначен и просто могу выбрать один из них.

import React, { Component } from 'react';

export default class Tablerow extends Component {
  constructor(props){
    super(props);
    let {listwebsites} = this.props;
    listwebsites.checked = false;
    this.state = {
        fields : {
          id: listwebsites.id
        }
    }

    this.click = this.click.bind(this);
    this.selectOnlyThis = this.selectOnlyThis.bind(this);

  }
  click(value){
    this.props.handleChangess(this.state, value);
  };

  render() {
        const {listwebsites} = this.props;
          return (
            <tr>
              <td><input id={`checkbox_${listwebsites.id}`} value={listwebsites.checked} onChange={e => this.click(e.target.checked)} type="checkbox" name="record"/></td>
              <td>{listwebsites.name}</td>
              <td>{listwebsites.url}</td>
            </tr>
          )
    }
}

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Вот как вы это делаете, в родительском файле TableRow, который в этом фрагменте является App.js, используйте selectedId состояние, в котором хранится идентификатор или идентификатор списка веб-сайтов TableRow, если проверено, и будет нулевым, если не проверено.

Внутри вашего рендера TableRow, используйте disabled attr в вашем <input/> элементе.disabled проверит реквизиты selectedId, переданные из <App/>, если selectedId не равно NULL и значение selectedId! == текущий <TableRow/> идентификатор списка сайтов, затем отключит <input/>. 

const listwebsitesData = [
  { id: 1, name: 'name-1', url: 'Url-1' },
  { id: 2, name: 'name-2', url: 'Url-2' },
  { id: 3, name: 'name-3', url: 'Url-3' }
]

class App extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      selectedId: null,
    }
    this.handleChangess = this.handleChangess.bind(this);
  }

  handleChangess(id, value) { 
    this.setState({selectedId: value===true?id:null})
  }

  render(){
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {
        listwebsitesData.map((data)=>{
          return <Tablerow selectedId={this.state.selectedId} listwebsites={data} handleChangess={this.handleChangess} />
        })
      }    
    </div>
  )
  }
}

class Tablerow extends React.Component {
  constructor(props) {
    super(props);
    let { listwebsites } = this.props;
    listwebsites.checked = false;
    this.state = {
      fields: {
        id: listwebsites.id
      }
    }

    this.click = this.click.bind(this);
    this.selectOnlyThis = this.selectOnlyThis.bind(this);

  }
  click(value) {
    this.props.handleChangess(this.state.fields.id, value);
  };

  selectOnlyThis(){

  }

  render() {
    const { listwebsites, selectedId } = this.props;
    return (
      <tr>
        <td><input disabled={selectedId && selectedId!==listwebsites.id} id={`checkbox_${listwebsites.id}`} value={listwebsites.checked} onChange={e => this.click(e.target.checked)} type="checkbox" name="record" /></td>
        <td>{listwebsites.name}</td>
        <td>{listwebsites.url}</td>
      </tr>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
0 голосов
/ 03 февраля 2019

По сути, переместите состояние выбора на один уровень вверх.Вы должны зацикливаться на строке таблицы, в компоненте таблицы на один уровень выше.Поместите туда поле состояния, скажем, «selectedId», и передайте его как опору всем компонентам строки таблицы.Позже onChange будет распространяться из строки таблицы с «id» в Table onChangeHandler для обновления «selectedId».В функции рендеринга для строки таблицы просто добавьте, скажем, checked = id === selectedId, делая только одну из строк таблицы выбранной в любой момент времени.Чтобы сделать его более общим, вы можете позже добавить, скажем, «множественный» флаг «истина / ложь», где компонент может переключаться между разрешением выбора нескольких или одного флажка.

Рабочий пример https://codesandbox.io/s/zn9l7qpn83

Byпо умолчанию, первый будет выбран.Когда вы выбираете другой, он отменяет выбор другого;таким образом позволяя выбрать только один в любой момент времени.

Надеюсь, это поможет!

...