Question

我有一个Field

<Field name="SOME_ID"
           component={TestWrapper}
           options={this.getFridaIngredients()}
    />

TestWrapper看起来像这样：

import React, { Component } from 'react';
import Select from 'react-select';
import TextField from 'material-ui/TextField';

class TestWrapper extends Component{

  constructor(props){
    super(props);

    this.state = {
      textValue: this.props.input.value,
      selectValue: this.props.input.value
   }

    this.onSelectChange = this.onSelectChange.bind(this);
    this.onTextChange = this.onTextChange.bind(this);
  }

  onSelectChange(e) {
    if(e) {
      this.setState({
        textValue: e.value,
        selectValue: e.value
      })
    }
    else{
      this.setState({
        textValue: '',
        selectValue: ''
      })
    }
  }

  onTextChange(e) {
    this.setState({
      textValue: e.target.value,
    })
  }

  render() {
    return(
      <div className="row">
        <div className="col-md-4">
          <TextField
           value={this.state.textValue}
           floatingLabelText="Some ID"
           onChange={this.onTextChange}
         />
       </div>
       <div className="col-md-6" style={{paddingTop: "29px"}}>
         <Select
           value={this.state.selectValue}
           options={this.props.options}
           placeholder="Search..."
           onChange={this.onSelectChange}
         />
       </div>
     </div>
   )
 }
}

export default TestWrapper;

我将测试包装器放在具有自身状态的组件中的原因是因为我想在从SelectField中选择某些内容时更新文本字段，而当我做的时候我无法弄清楚它是否正常工作

之类的东西

<Field name="SOME_ID" component={SelectField} />
<Field name="SOME_ID.value" component={TextField} />

因为文本字段不会设置为初始渲染的值（我正在使用表单进行编辑）。

所以现在我的问题是带有TestWrapper组件的SOME_ID字段不会触发任何redux-form操作。当我更改某些内容或单击某些内容时，不会触发FOCUS或CHANGE操作。我怎样才能做到这一点？

Redux-form不会触发操作

0 个答案: