React, Redux Form: обработчик изменений не позволяет перебрасывать передаваемые аргументы каким-либо образом - PullRequest
Новая
       1

React, Redux Form: обработчик изменений не позволяет перебрасывать передаваемые аргументы каким-либо образом

0 голосов
/ 24 марта 2019

Недавно я столкнулся с довольно странной проблемой. У меня есть компонент класса в реаги, который использует избыточную форму. onChange обработчик события вызывается в случае, если установлен флажок ввода. Два аргумента value и type (имя ввода) передаются в обработчик событий. Когда я консоль журнала value, он правильно показывает предыдущее значение. Однако я не могу перевернуть это логическое значение каким-либо образом, то есть выражение !value или let value = value?false:true всегда возвращает истину / ложь в зависимости от начального состояния независимо от текущего состояния. Я искал в Google & SO, чтобы найти причину, но не смог найти то же самое. Любая помощь очень ценится.

Вот код для вашей справки 

class Example extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: true
    };
    this.handleChange = this.handleChange.bind(this);
  };

  handleChange(value, type) {
    console.log(value); //outputs previous value (before toggle)
    let currValue = value ? false:true; //this line is not working
    console.log(currValue); //outputs the same value (irrespective of state)
  } 

  render() {
   return (
      <div>
        <Field component="input" type="checkbox" name="name" id="name"
      onChange={({target}) => this.handleChange(target.value,target.name)}/> Name
      </div>
     );
  }
}

function mapStateToProps(state) {
    return state;
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({change},dispatch);
}

export default compose(
  reduxForm({
    form: 'example', key: 'example',
    initialValues: {
      name: true
    },
    enableReinitialize: true
  }),
  connect(mapStateToProps, mapDispatchToProps)
)(Example);

Выход (переключается дважды: начальное состояние проверено)

Console Output

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

, поскольку тип value является строкой, ваш оператор переворачивания работает не так, как вы хотите

, поскольку "false" считается истинным значением. 

console.log(Boolean("false"));
let currValue = false;
if(value == "false")
    currValue = true;

ваша функция должна выглядеть так 

handleChange(value, type) {
    console.log(value); 
    let currValue = false;
    if(value == "false")
        currValue = true;
    console.log(currValue); 
}
0 голосов
/ 24 марта 2019

Вы не устанавливаете значение для Field. Итак, вам нужно установить значение: 

<Field 
  component="input" 
  type="checkbox" 
  name="name" 
  id="name"
  onChange={({target}) => this.handleChange(target.value,target.name)}
  value={this.state.name || true}
/>

Обработчик: 

handleChange(value, type) {
  this.setState({[type]: !value})
}
...