反应无状态组件无法编辑文本字段

【问题标题】：React Stateless Component Unable to edit text field反应无状态组件无法编辑文本字段
【发布时间】：2017-06-17 09:07:17
【问题描述】：

我有一个无状态的反应组件，一些数据正在传递给它。

我想要什么：

在文本输入中填充数据
onblur 将更改后的值传递给模糊函数

目前无法在文本字段中输入任何内容。

// Main file
const dataObj = {
  name: 'Foo'
}

<Component data={dataObj} onBlurFn={onBlurFn()} /> //Assuming onBlurFn exists

//React Component
import React, { PropTypes } from 'react';

const ListView = ({
  dataObj,
  onBlurFn
}) => {
  return (
   <input className="name" type="text" defaultValue={dataObj.name} onBlur={onBlurFn(changedVal)}/>
  )
}

【问题讨论】：

我不认为你是这样使用 onBlur 的，试试onBlur={(changedVal) => onBlurFn(changedVal)}

标签： javascript reactjs state

【解决方案1】：

我不认为这就是你使用 onBlur 的方式，尝试将其更改为 onBlur={(changedVal) => onBlurFn(changedVal)}。

const dataObj = {
  name: 'Foo'
}

const ListView = ({
  dataObj,
  onBlurFn
}) => {
  return (
   <input className="name" type="text" defaultValue={dataObj.name} onBlur={(changedVal) => onBlurFn(changedVal)}/>
  )
}

// fake onBlurFn that prints the value of input onBlur
// please change it to your own implementation
const onBlurFn = (e) => console.log(e.target.value);

ReactDOM.render(<ListView onBlurFn={onBlurFn} dataObj={dataObj} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

【讨论】：