Question

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

我想要的是什么：

填充文本输入中的数据
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)}/>
  )
}

Answer 1

我不会想到你如何使用onBlur，尝试将其更改为onBlur={(changedVal) => onBlurFn(changedVal)}。

＆＃13;

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'));

＆＃13;

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

＆＃13;

React Stateless Component无法编辑文本字段

1 个答案: