forms - 如何更改redux中的输入值

Question

我正在制作一个基于react-redux的文件管理器应用程序，我遇到了input的问题.

例如我的代码:

PathForm.js:

export default class PathForm extends Component {

  render() {

    const { currentPath,  handleSubmit } = this.props;
    console.log('PathFormPathFormPathForm', this.props)

    return (
      <div className="path-box">
        <form onSubmit={handleSubmit}>
          <div>
            <input type="text" className="current-path-input" placeholder="input path"  value={currentPath} />
          </div>
          <button className="go-btn" type="submit">Go</button>
        </form>
      </div>
    );
  }
}

Explorer.js:

class Explorer extends Component {

  goPath(e) {
    e.preventDefault()
    // fake function here, because I have to solve the input problem first
    console.log('PathForm goPath:',this.props)
    let {targetPath , actions} = this.props
    swal(targetPath)
  }

  render() {
    const { node, currentPath , actions} = this.props
    console.log('Explorer.render:',this.props)

    return (
      <div className='explorer-container'>
        <PathForm currentPath={currentPath} handleSubmit={this.goPath.bind(this)}/>
        <FileListOperator />
        <FileListView fileList={node && node.childNodes} actions ={actions} />
      </div>
    );
  }
}


function mapStateToProps(state, ownProps) {
  return {
    node: state.tree[state.tree.currentPath],
    currentPath: state.tree.currentPath
  };
}

function mapDispatchToProps(dispatch) {
  console.log('mapDispatchToProps')
  return {
    actions: bindActionCreators(NodeActions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Explorer);

我想要的功能:

我有一个PathForm ，它需要从两种方式显示路径:

1. 用户从左侧 TreeView 中单击文件路径，Explorer将此路径获取为 currentPath ，然后传递给PathForm ，并显示currentPath在输入中

2. 用户直接输入 PathForm 的路径的输入，PathForm调用handleSubmit (资源管理器的功能)更改currentPath

   附加:我想保留PathForm作为无状态组件

问题:

1. 我想使用PathForm作为无状态形式，所以我不想将其连接到存储，但我需要它通过 currentPath 更改输入。但如果我设置 value={currentPath} ，用户不能输入任何其他内容。
2. 更改为<input type="text" onChange={this.changeValue} value={this.getValue()}/>允许用户在此输入中键入字符串，但不能使用 props currentPath路过Explorer
3. 我能想到的唯一方法就是将此表单连接到我不想要的存储。我想要 Explorer调度所有 Action 并传递 Prop 。

<小时/>

尝试过一些包

我发现输入不符合我的想法，所以我尝试了两个流行的包:

1. redux-form

   它创建一个表单需要这么多代码，并且官方文档没有说明如何使用父 Prop 渲染此表单，我尝试通过props和handleSubmit对它来说，不是工作。我看到之后 React + Redux - What's the best way to handle CRUD in a form component?和 How to wire up redux-form bindings to the form's inputs我发现我不能这样做，它定义了一些函数覆盖我的，这种行为对我来说不好(我必须更改 handlerSubmit 函数名称，但它仍然不起作用)，并且它连接到商店。所以我转向formsy-react

2. formsy-react

   它仍然需要这么多代码，尽管它提供了一些 mixin ，但我仍然需要使用 changeValue 编写自定义文本输入函数我自己(changeValue在大多数情况下不需要写正常html jquery app)。然后我发现问题是PathForm无法使用 Prop currentPath路过Explorer ...

可能有效的解决方案(但我不倾向于使用):

连接PathForm要存储，请添加另一个状态 inputPathValue对于这个输入。使用inputPathValue与 currentPath 互动

<小时/>

经过上述，我发现在react中使用输入/表单非常不方便......这是否意味着我必须连接 PathForm去斯特鲁？还有其他方法可以解决我的问题吗？

Answer 1

reactjs中有非受控(不设置值)和受控(设置值)输入。

受控不允许用户输入，但不受控允许。

解决方案:

1. 需要使用不受控制的输入(无值属性)。
2. 选择输入元素并在currentPath更改时设置值。

<小时/>

坏方法:

代码:

export default class PathForm extends Component {
  changeCurrentPath(path) {
    const pathInput = document.querySelector('.current-path-input')
    if (pathInput){
      pathInput.value = path
      this.lastPath = path
    }
  }

  render() {

    const { currentPath,  handleSubmit } = this.props;
    console.log('PathFormPathFormPathForm', this.props)

    this.changeCurrentPath(currentPath)

    return (
      <div className="path-box">
        <form onSubmit={handleSubmit}>
          <div>
            <input type="text" className="current-path-input" placeholder="input path" />
          </div>
          <button className="go-btn" type="submit">Go</button>
        </form>
      </div>
    );
  }
}

<小时/>

好方法:

使用componentWillReceiveProps设置props，使用rel选择元素

1.使用表单提交

export default class PathForm extends Component {

  constructor(props) {
    super(props)
    // can not find `this` if not bind
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentPath !== this.props.currentPath) {
      this.setInputValue(nextProps.currentPath)
    }
  }

  getInputValue() {
    return this.refs.pathInput.value
  }

  setInputValue(val) {
    this.refs.pathInput.value = val
  }

  handleSubmit(e){
    e.preventDefault()
    this.props.handleSubmit(this.getInputValue())
  }

  render() {

    return (
      <div className="path-box">
        <form onSubmit={this.handleSubmit}>
          <input className="current-path-input"
          defaultValue={this.props.currentPath}
          ref="pathInput" />
          <button className="waves-effect waves-light btn"  type="submit">Go</button>
        </form>
      </div>
    );
  }
}

2.使用按钮点击

export default class PathForm extends Component {

  constructor(props) {
    super(props)
    // can not find `this` if not bind
    this.handleGoClick = this.handleGoClick.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentPath !== this.props.currentPath) {
      this.setInputValue(nextProps.currentPath)
    }
  }

  getInputValue() {
    return this.refs.pathInput.value
  }

  setInputValue(val) {
    this.refs.pathInput.value = val
  }

  handleKeyUp(e) {
    if (e.keyCode === 13) {
      this.handleGoClick()
    }
  }

  handleGoClick(e) {
    e.preventDefault()
    this.props.handleSubmit(this.getInputValue())
  }

  render() {

    return (
      <div className="path-box">
        <form >
          <input className="current-path-input"
          defaultValue={this.props.currentPath}
          onKeyUp={this.handleKeyUp}
          ref="pathInput" />
          <button className="waves-effect waves-light btn"  type="submit" onClick={this.handleGoClick}>Go</button>
        </form>
      </div>
    );
  }
}