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

Question

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

我想要什么：

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

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

// 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)}/>
  )
}

Answer 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>

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

React Stateless Component Unable to edit text field

javascript

state

reactjs